CSS - interpolate-size

• トップ
• CSSリファレンス
• interpolate-size

概要

説明

通常、auto, min-content, max-content などのキーワードによる長さに対してはトランジションが効きませんが、interpolate-size に allow-keywords を指定することにより、キーワード長さに対してもトランジションが効くようになります。ブラウザのバージョンアップにより意図せずトランジションが効いてしまうのを防ぐためにデフォルトの動作は変更せず、allow-keywords を指定した時だけ効くようにしています。:root に対して指定しするとページ内のすべての要素に対して有効化されます。

calc-size()との使い分け

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>

関連項目

リンク

• https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size
• https://drafts.csswg.org/css-values-5/#interpolate-size
• https://caniuse.com/mdn-css_properties_interpolate-size