ずっと望んでいた機能がChromeには既に実装されていたようです。script
ちょっと取り上げるの遅いかもしれませんが今回はautoな値でもアニメーションを提供してくれる「interpolate-sizeプロパティ」と「calc-size()関数」を紹介します。
heightやwidthの値をautoにした場合transitionを設定していてもアニメーションされることなく一瞬で切り替わってしまいますよね。
autoに対してアニメーションして欲しい場面としてはアコーディオンを実装する時なんかがあると思いますが、「クリックしたらアニメーションしながら開く動作」はcssだけで実装することができず、仕方なくjsで実装することになってしまう……
個人的にあまり使わないjQueryですが、このアコーディオンに関してだけはjQueryの手軽さが羨ましかった…！
自分の担当するページではjQueryを使わないようにしていたので
jsで親のscrollHeightを取得し、
↓
インラインで設定した後、
↓
さらにtransitionendイベントを付けて、変化後にautoに戻す
という方法をとっていました。
autoに戻すのは、アコーディオン内にもさらに高さが変化する要素があっても対応できるようにです。
中身自体は難しいものではないですが、「こんなもんautoでもアニメーションできたらそもそもいらんやんけぇ！」と思っていました。
そんな皆様の心の叫びを聞き入れてくれたのが「interpolate-sizeプロパティ」と「calc-size()関数」です。
interpolate-size
「interpolate-size」に「allow-keywords」を指定すると、auto, min-content, max-content などの長さに対してもtransitionが有効になります。
便利！ 正しく求めていたもの！
:rootに対して指定してあげれば全体に適応できるので今後はcssの初期化の時点で入れちゃおうと思っている次第です。
試しにボタンにホバーアニメーションをつけてみましょう。
See the Pen interpolate-sizeテスト by 葉っぱ一号 (@happa1go) on CodePen.
「好きなテキスト」を好きな長さのテキストに変更してもその長さに合わせてtransitionが効いてくれます。
interpolate-size: allow-keywords;calc-size()
calc-size()もinterpolate-sizeと同じようにautoなどの値をtransitionで使うことができます。
interpolate-sizeとの違いはその値を使って計算できる点が一番大きな点っぽいですね。
calc-size()は引数を２つ持ちまして、第一引数には使用するキーワード（auto、min-content、max-content、fit-content、stretch、containなど）、第二引数には第一で指定したサイズを”size”という変数として計算式を入れられます。
calc-size( auto, size * 1.1);
みたいにすればautoの長さを1.1倍した長さを指定したことになります。
calc-size( auto, size + 4em);
だったらautoの長さに4em分加えた長さですね。↓
See the Pen calc-size by 葉っぱ一号 (@happa1go) on CodePen.
使いようによっては面白い動きが作れるかも？
基本的に計算したい時ってあんまりない気はしますが必要な時には心強い味方になってくれそうですね！
早く標準になって欲しい……
