CSS 動的高さ遷移アニメーション効果の実装

この質問は、Nuggets のメッセージから生まれました。友人が、次のコードの高さ遷移アニメーションがなぜ無効なのかと尋ねました。

疑似コードはおそらく次のようになります:

{
    高さ: 未設定;
    遷移: すべて 0.3 秒線形。
    変更予定: 高さ;
 
    ＆。上 {
        高さ: 0;
    }
    ＆。下 {
        高さ: 未設定;
    }
}

これを実際のデモに復元すると、効果は次のようになります (基本的な考え方は、要素の.upと.downクラスを切り替えて、要素を拡大したり閉じたりすることです)。

えっ？とても不思議です。height heightに明確にtransitionを設定したのですが、トランジションアニメーションがトリガーされず、1ステップで直接拡大されるのはなぜでしょうか？

期待される効果は以下のとおりです。

トランジションは高さ: 自動をサポートしていません

上記のコードがheight: unsetに設定されている場合、実際にはheight: autoを設定するのと同じです。私たちの考えは、このコードがテキスト コンテナーの動的な高さをサポートできることを期待することです。展開するたびに、コンテナ自体の高さに遷移するだけです。

仕様を見ると、CSS トランジションが要素の高さの auto への変更をサポートしていないことが原因です。

上記のheight: unset特定の高さの値に置き換えると、アニメーションが有効になります。例:

{
    ＆。上 {
        高さ: 0;
    }
    ＆。下 {
      - 高さ: 未設定;
      + 高さ: 500px;
    }
} 

しかし、ダイナミックな高さの変化も実現したいと考えます。他に方法はないのでしょうか?

動的高さに適応するためにmax-heightを巧みに使う

ねえ、ここにとても興味深いちょっとしたトリックがあるんだよ。 height: autoはサポートされていないため、 max-height機能を使用して動的な高さの拡張を実現する別の方法を見つけます。

上記のコードを修正して、 height: 0をmax-height: 0に、 height: auto max-height: 1000pxに置き換えてみましょう。疑似コードはおそらく次のようになります。

{
    最大高さ: 0;
    遷移: 最大高さ 0.3 秒線形;
 
    ＆。上 {
        最大高さ: 0;
    }
    ＆。下 {
        最大高さ: 1000px;
    }
}

実際のコンテナの最大の高さを見積もってみましょう。ここでの1000px 、最大の高さよりも高くする必要があります。ただし、あまり高く設定しすぎることはできません。最高設定は、最大使用高さに近い値にする必要があります。その理由については後ほど説明します。

max-heightテキストの最大の高さのみを制限するため、コンテナの実際の高さが最大の高さの制限に達しない場合は、それ以上の高さは増加しません。効果を見てみましょう。

CodePen デモ - 高さプロパティの遷移が機能しない

小さな欠陥

全体的な効果は依然として非常に素晴らしいですが、もちろん、2つの小さな欠陥があるかもしれません。

1. 実際のシナリオでmax-heightが必要であり、他の機能がある場合、この方法ではニーズを満たせない可能性があります。
2. もう一つの欠点は視覚的な遅延であり、実際の高さとの差が大きいほど顕著になります。つまり、コンテナの実際の高さが 200 ピクセルの場合、 max-heightは 1000 ピクセル、アニメーション時間は 1 秒、イージング関数は線形です。実際のアニメーション遷移時間は 0 ピクセルから 200 ピクセルの高さまでわずか 0.2 秒なので、注意が必要です。

元の拡張アニメーションでは、コンテナの高さが 1 秒で 1000 ピクセルまで伸びると予想されていましたが、実際には 200 ピクセルで停止したため、アニメーション時間はわずか 0.2 秒でした。まとめると、この方法は良いものですが、使用する際には具体的な分析が必要です。

CSS 動的高さ遷移アニメーション効果の実装に関するこの記事はこれで終わりです。CSS 高さ遷移アニメーションの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。