しるてく

技術的な話をします

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');
});

動かない

で、実際に動かしてみると、アニメーションしない……。
おかしいなと思って、試しに次のように変えてみると、

  1. 15px -> 0pxでアニメーション
  2. 一気に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までアニメーションしている体になっているっぽくて、開く時は早くて、閉じるときがもっさりする。

ので、もっとなんとかしたいなーと思っているところ。