【CSS3】transitionを使ったレスポンシブ対応のアコーディオンメニュー、height対応

transitionを使ったメニューを作るときのポイント

まず、transitionを使ったアニメーションを実装する際に押さえておきたいポイントを紹介します。

display: noneで要素を非表示にしておくとアニメーションが適用されない

jQueryと同じ要領でdisplay: none;にして、.is-open付与時にdisplay: block;とした場合、
opacityのアニメーションは一切反映されません。

.js-accordion {
	display: none;
	transition: 0.5s all;
	opacity: 0;
}
.is-open.js-accordion {
	display: block;
	opacity: 1;
}

height: auto;は使えない

height: 0; -> height: auto;に遷移できればすごく簡単なんですが、動きません。
max-heightまたはjsで設定してやる必要があります。
ですが、max-heightは設定した高さまでanimationを実行するので動きに無駄があり、
jsはCSSアニメーションにトリガー以外で使いたくないので却下です。

.js-accordion { 
	transition: 0.5s height;
	height: 0;
}
.is-open.js-accordion {
	height: auto;
}

transitionの開始と終了のアニメーションは別々に指定できる

transitionは開始と終了のアニメーションが同じで、細かい設定をしたい場合はanimationを使うものだと思ってたんですが、transitionでも終了のアニメーションを設定できます。
以下のコードでは2.5秒かけゆっくり現れ、一瞬で消えます。
この書き方であればmax-heightで指定した高さ消えるの遅い問題を解決できます。

.js-accordion {
	transition: 0s all;
	opacity: 0;
	max-height: 0;
}
.is-open.js-accordion {
	transition: 2.5s all;
	opacity: 1;
	max-height: 1000px;
}

visibility: hidden;を使う

display: none;を使うとアニメーションできませんが、visibilityを使うと他のプロパティとのアニメーションが可能です。

表示・非表示だけでなくhoverの遅延として使えます。
以前はhoverIntentというスクリプトで遅延を実装してましたが、、visibility便利ですね。

.js-accordion {
	visibility: hidden;
	transition: 0.5s opacity;
	opacity: 0;
}
.is-open.js-accordion {
	visibility: visible;
	opacity: 1;
}

トリガーだけjQueryを使う

レスポンシブのサイトでjQueryのshowやhiddenを使うとインラインでスタイルが指定されるため、
ウィンドウサイズ変更時に意図せず開いていたりします。
jQueryの使用はトリガークラス付与のみに限定します。

今回はclickイベントで開閉を行います。
PCではCSSの:hoverをトリガーにするので.is-openは使いません。

$('.js-accordion').on('click',function(){
	if( $(this).hasClass('is-open') ) {
		$(this).removeClass('is-open');
	}else {
		$(this).addClass('is-open');
	}
});

jQueryMobileにもあるtapイベントやhammer.js使えばより快適な動作になると思います。

hammer.js動作参考:jQueryでタップ系のイベントを確認してみる

デモ


8/24作成中
PC表示はリンク先で。

トリガーはjs、アニメーションはCSSで行うことで完璧なレスポンシブ対応メニューができました。
visibilityとtransitionの複数要素指定の組み合わせでおもしろいアニメーションを簡単に追加できると思います。

スポンサーリンク
RESAD
RESAD

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
RESAD