属性名 | interpolate-size |
---|---|
値 | allow-keywords | numeric-only |
初期値 | numeric-only |
適用可能要素 | すべての要素 |
継承 | 継承する |
サポート | https://caniuse.com/mdn-css_properties_interpolate-size |
通常、auto, min-content, max-content などのキーワードによる長さに対してはトランジションが効きませんが、interpolate-size
に allow-keywords
を指定することにより、キーワード長さに対してもトランジションが効くようになります。ブラウザのバージョンアップにより意図せずトランジションが効いてしまうのを防ぐためにデフォルトの動作は変更せず、allow-keywords
を指定した時だけ効くようにしています。:root
に対して指定しするとページ内のすべての要素に対して有効化されます。
interpolate-size
と類似の機能に calc-size()
があります。interpolate-size
を用いても auto
等に対するトランジションは有効になりますが、下記のような計算を行うことはできません。計算が不要であれば interpolate-size
、計算が必要であれば calc-size()
の使い分けでよいかと思います。
height: calc(auto + 3rem); /* 計算できない */
.my-accordion { border: 1px solid #ccc; padding: .2rem; background-color: #fff; interpolate-size: allow-keywords; .my-accordion-content { height: 0; /* auto → 0 に対してトランジションが効くようになる */ overflow: hidden; transition: height .3s ease; padding-left: 1rem; } [type="checkbox"]:checked ~ .my-accordion-content { height: auto; /* 0 → auto に対してトランジションが効くようになる */ } }
<div class="my-accordion"> <input type="checkbox" id="cb1"><label for="cb1">アコーディオン</label> <div class="my-accordion-content"> <div>AAA</div> <div>AAA</div> <div>AAA</div> <div>AAA</div> <div>AAA</div> <div>AAA</div> </div> </div>