CSS で非表示の要素をアニメーション化するにはどうすればよいですか?

CSS アニメーションと表示: なし

CSS では、非表示の要素 (表示: なしなど) をアニメーション化するのは簡単ではありません。 「display: none」を設定すると、ドキュメント フローから要素が削除されますが、要素は依然としてスペースを占有します。この問題を解決するには:

1.固定高さを設定します:

display: none と display: block の間ではアニメーション化できないため、非表示要素の初期の高さを、表示されたときに占める高さに固定します。

CSS:

#main-div {
  height: 0;
  display: block;
  overflow: hidden;
  animation-delay: 3.5s;
}

2.アニメーション キーフレームを使用します:

要素を高さ 0 から希望の高さに遷移させるアニメーション キーフレームを定義します。

CSS:

@keyframes main-div-slide {
  from {
    height: 0;
  }
  to {
    height: 375px;
  }
}

3.アニメーションを適用します:

アニメーション キーフレームを非表示要素に関連付けます。

CSS:

#main-div {
  animation: main-div-slide 1s ease 3.5s forwards;
}

次に、非表示要素ページ上の他の要素のレイアウトに影響を与えることなく、シームレスにビューにスライドダウンします。

注: この方法は、非表示の要素の高さが固定されている場合に機能します。動的な高さの場合は、jQuery または JavaScript の使用が必要になる場合があります。

以上がCSS で非表示の要素をアニメーション化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。