Bolehkah CSS Transitions Auto-Sembunyikan Elemen Selepas Masa yang Ditetapkan?

Auto-Menyembunyikan Elemen Menggunakan Peralihan CSS

Bolehkah anda membuat elemen hilang 5 saat selepas halaman dimuatkan? Walaupun penyelesaian jQuery diketahui, artikel ini meneroka cara untuk mencapai kesan yang sama menggunakan peralihan CSS.

Adakah Mungkin?

Ya, tetapi tidak dengan cara konvensional . Biasanya, peralihan digunakan pada sifat seperti paparan, dimensi atau limpahan. Walau bagaimanapun, sifat ini secara langsung mengawal keterlihatan elemen dan pendudukan ruang.

Penyelesaian Inovatif

Untuk memintas pengehadan ini, cipta animasi untuk elemen sasaran. Selepas 5 saat, togol keterlihatannya kepada tersembunyi. Selain itu, tetapkan ketinggian dan lebarnya kepada sifar untuk mengelakkannya daripada mengambil ruang dalam aliran dokumen.

Contoh Pelaksanaan

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>

Kod ini menyediakan animasi yang mengecilkan elemen kepada dimensi sifar 5 saat selepas halaman dimuatkan. Elemen menjadi tersembunyi sambil mengekalkan kedudukannya dalam aliran dokumen.

Kesimpulan

Walaupun pendekatan konvensional untuk menyembunyikan elemen mungkin tidak boleh digunakan secara langsung, menggunakan togol keterlihatan dan sifar dimensi bersama-sama dengan animasi CSS menyediakan penyelesaian yang inovatif untuk elemen auto-sembunyi selepas selang masa yang ditentukan.

Atas ialah kandungan terperinci Bolehkah CSS Transitions Auto-Sembunyikan Elemen Selepas Masa yang Ditetapkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!