CSSのトランジションは、インタラクティブ性を生み出す良い方法です。, transition のような要素の固有変数の遷移をアニメーション化します。 auto は、何十年もの間、ウェブ開発者にとっての問題であり、唯一の選択肢は、JavaScriptを使って動的に高さを計算することだった。
もう1つの課題は、要素が最初のスタイルを受け取ったときにトランジションを開始することです。 display-の価値 none この記事では、以下のような新しいCSS関数を使ってこの問題を解決する方法を説明する。 calc-size(), interpolate-size, @starting-style と transition-behavior はマスターできる。
解決策 calc-size()
DOM要素が閉じた状態(height: 0)からオープン状態(height: auto)、アニメーションは通常実行されません。 transition-これは、ブラウザが次のような固有変数に遷移を設定しないためです。 auto 新しい calc-size()-関数は、これらの固有変数の計算を可能にし、したがって遷移も可能にする。:
f95f6dcb193aa903adc84ce47bc4a296
について calc-size()-関数はまだすべてのブラウザで利用可能ではありません。 フォールバックは、元の height: auto-と宣言した。
解決策 interpolate-size
について interpolate-size-プロパティによって、ブラウザの補間動作を定義し、次のようなキーワードの間に使用するかどうかを決めることができる。 auto デフォルトでは、補間は数値間のみで行われる。 allow-keywords しかし、キーワード間のトランジションを有効にすることができます。:
f95f6dcb193aa903adc84ce47bc4a296
による interpolate-size: allow-keywords に対する :root-要素を使用すると、ページ全体の新しい動作が有効になります。
からの移行 display:none
もう一つの問題は display:none を見える状態にする。 display がアニメーション可能なプロパティでない場合、アニメーションはありません。 新しい CSS 関数がここで役立ちます。 @starting-style と transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
と transition-behavior: allow-discrete アニメーションが display-の価値 block オン none これらのルールにより、最初のスタイル更新中でもトランジションを実行できる。 @starting-style-ルールは、最初のスタイル更新時にアニメーションが正しく実行されるようにします。
ブラウザサポート
新しい物件は現在建設中である。 calc-size() と interpolate-size のサポートは、まだすべてのブラウザでサポートされているわけではありません。 Chromeでは、実験フラグに隠れて利用可能ですが、SafariとFirefoxではまだサポートされていません。 transition-behavior ChromeとEdgeでは使えるが、SafariとFirefoxでは使えない。