CSS トランジションは一定時間が経過すると要素を自動的に非表示にすることができますか?

CSS トランジションを使用した要素の自動非表示

ページの読み込み後 5 秒後に要素を非表示にすることはできますか? jQuery ソリューションは知られていますが、この記事では CSS トランジションを使用して同じ効果を実現する方法を検討します。

それは可能ですか?

はい、ただし従来の方法ではできません。通常、トランジションは表示、寸法、オーバーフローなどのプロパティに適用されます。ただし、これらのプロパティは要素の可視性とスペース占有を直接制御します。

革新的なソリューション

この制限を回避するには、ターゲット要素のアニメーションを作成します。 5 秒後、表示を非表示に切り替えます。さらに、ドキュメント フローでスペースを占有しないように、高さと幅を 0 に設定します。

実装例

CSS:

#hideMe {
  -webkit-animation: cssAnimation 0s ease-in 5s forwards;
  animation: cssAnimation 0s ease-in 5s forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes cssAnimation {
  to {
    width: 0;
    height: 0;
    overflow: hidden;
  }
}

HTML:

<div>

このコードは、ページが読み込まれてから 5 秒後に要素をゼロ次元に縮小するアニメーションを設定します。要素はドキュメント フロー内での位置を維持したまま非表示になります。

結論

要素を非表示にする従来のアプローチは直接適用できない場合がありますが、表示の切り替えとゼロを使用します。 CSS アニメーションと組み合わせたディメンションは、指定された時間間隔の後に要素を自動的に非表示にする革新的なソリューションを提供します。

以上がCSS トランジションは一定時間が経過すると要素を自動的に非表示にすることができますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。