Drawerというプラグインを使用したメニューのドロップダウンにcssアニメーションをつけたいです。

お世話になります。
現在、Drawerというjqueryプラグインを使用させていただいてドロワーメニューを作っています。
ドロップダウンの機能もプラスできるということでしたので下記サンプルのように実装したのですが、このドロップダウンにcssアニメーション(transition効果)を使って滑らかにスライドさせる事は可能でしょうか？
自分でできる事は試してみましたが、分かりませんでした。
初心者の質問で申し訳ありませんが、ご回答よろしくお願いいたします。

動くサンプル
https://jsfiddle.net/8amp7eL4/1/

行動規範の内容に同意します

回答1件

ベストアンサー

こちらのサンプルでは、子メニューの表示／非表示をdisplay:none;とdisplay:block;で制御しています。
これだとそもそもtransition効果をつけることはできないので、子メニュー開閉の仕組みをdisplay以外のものに変更しない限りtransition効果をつけることはできません。

開閉の仕組みをheightで制御するようにすればtransition効果をつけることはできると思いますが、
子メニューの高さをCSSに固定値で設定してしまうとメニュー数が変わったりした場合に対応できないので、
子メニューの内容物の高さを動的に取得してheightに与える処理を加えてやらないと難しいのかな…という気がします。

それが面倒とか分からないとかであれば、子メニューの開閉はjQueryのslideDown(), slideUp(), slideToggle()あたりのメソッドで実装するのが早いかもしれません。

投稿2016/10/15 14:53

aKusano

総合スコア3763

Yuki1012

2016/10/16 15:06

ご回答ありがとうございます。ご教授いただいた『jQueryのslideDown(), slideUp(), slideToggle()』はスライドアニメーションは成功しましたが、子メニューの高さがちゃんと取得できないためかスマホで動かした時に、スクロールをすることができませんでした。。。おっしゃる通り、『子メニューの内容物の高さを動的に取得してheightに与える処理』がベストな対応だと思いますが、私では正解にたどり着けませんでした(;o;)