css3 transitionでheight: auto;が使えないのでmax-heightを使ってみる
背景
CSSだけでスクロールアップダウンしたいなーと思って、特に何も考えず、次のような実装をしてみた。
#open-infoをクリックすると、#infoが内容量に合わせて良い感じにスクロールして閉じたり開いたりしてくれる予定。
実装
#info { overflow: hidden; height: 0; -webkit-transition: height 1000ms; } #info.open { heigt: auto; }
$('#open-info').on('click', function() { $('#info').toggleClass('open'); });
動かない
で、実際に動かしてみると、アニメーションしない……。
おかしいなと思って、試しに次のように変えてみると、
- 15px -> 0pxでアニメーション
- 一気にheight: auto;になる
という動作をしているらしいことが分かった。
#info { overflow: hidden; height: 15px; -webkit-transition: height 1000ms; } #info.open { heigt: auto; }
いちおうの対策
多分autoがいけないんだろうなと思って.openのほうに数値を入力するとちゃんとアニメーションする。
そこで次のようにしてみた。
#info { overflow: hidden; max-height: 0; -webkit-transition: max-height 1000ms; } #info.open { max-height: 100px; /* 十分でかい数字 */ }
めでたしめでたし。
課題
と言いたいところだけど、この方法にも問題がある。
確かに想定通りの高さにアニメーションするのだけども、速度がおかしい。
max-heightを色々変えてみると原因は分かって、transitionがmax-heightまでアニメーションしている体になっているっぽくて、開く時は早くて、閉じるときがもっさりする。
ので、もっとなんとかしたいなーと思っているところ。