CSS のみを使用して Display:None で Div をアニメーション化する方法

表示付きの CSS アニメーション: なし ジレンマ

CSS アニメーションを使用する場合、後で div をスライドインしたい状況に遭遇することがあります。一方、最初は他の要素がそのスペースを埋めます。ただし、アニメーション化された div を [表示: なし] に設定すると、領域が占有され続け、他の要素が適切に流れなくなります。

この問題を解決するには、アニメーション化された div が表示されないようにする方法が必要です。指定された時刻が表示されるまでスペースを占有しません。 jQuery の使用を検討することもできますが、この記事では、よりスムーズでタイミングを制御するための純粋な CSS ソリューションに焦点を当てています。

高さをハードコーディング

重要なのは、高さをハードコーディングすることにあります。アニメ部門。このようにして、自身を表示せずに必要なスペースを確保します。その後、CSS アニメーションを使用して、適切なタイミングで高さを変更できます。

たとえば、次のコードを考えてみましょう:

#main-image {
    height: 0;
    overflow: hidden;
    transition: height 1s ease 3.5s;
}

キーフレームを使用したアニメーション

高さを固定したら、キーフレームを使用してその変化をアニメーション化できます。以下に例を示します。

#main-image.fadeInDownBig {
    height: 300px;
}

この例では、fadeInDownBig クラスが目的のタイミングでメイン画像 div に適用され、目的の高さへの遷移がトリガーされます。

ブラウザのサポートとデモ

この CSS のみのソリューションは、最新のブラウザで適切に動作します。次のリンクでライブ デモを表示できます:

• http://jsfiddle.net/duopixel/qD5XX/

これを使用すると、このテクニックを使用すると、display: none の落とし穴なしでスムーズな CSS アニメーションを実現でき、div が意図したとおりにシームレスに流れるようになります。

以上がCSS のみを使用して Display:None で Div をアニメーション化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。