好きなだけかりんとうを食べる人生

フロントエンドとかデザインとかバックエンドとか浅く広く。社会人3年目のうぇぶでぃれくたーです。

transitionでheightをautoにしても動かない

困った経緯

インターン先で、ボックスを固定の高さに折りたたみ、クリックで元の高さに広げる処理を実装することになった。

これは仕様

リファレンスにtransitionでアニメーション可能なプロパティが掲載されている。

height, min-height, max-height : length, percentage, or calc

つまり数値や計算値のみ指定可能で、height: auto;の場合アニメーションさせることができない。 これはめんどくさい。

解決策

あらかじめ元の高さを取得しておけばいい。

/* ベンダープレフィックスは省略 */
#box {
    height: auto;
    transition: height 1s linear 0;
}
/* クロスブラウザは省略 */
var box = document.getElementById("box");
var bHeight = box.clientHeight;

(function init() {
    // 高さ100pxに固定
    box.style.height = "100px";
})();

// クリックしたら元の高さに広げる
addEventListener(box, function() {
    box.style.height = bHeight;
}, false);

これで多分いけるはず。 数値の設定や取得はJavascript、アニメーション部分はcss3に任せちゃうのがお手軽かなーと。 idじゃなくて複数存在するclassだったら配列にでも格納してイテレートすればいいとおもう。