Bagaimanakah Saya Boleh Menggunakan Peralihan CSS untuk Menyembunyikan Elemen Secara Automatik Selepas Kelewatan?

Peralihan CSS: Menyembunyikan Elemen Secara Automatik Selepas Kelewatan

Menyembunyikan elemen pada halaman web selepas selang masa tertentu boleh dicapai melalui pelbagai kaedah. Walaupun jQuery menawarkan penyelesaian yang mudah, peralihan CSS menyediakan alternatif yang inovatif untuk mencapai hasil yang sama.

Pendekatan:

Walaupun terdapat batasan peralihan CSS dalam sifat menganimasikan secara langsung seperti paparan, adalah mungkin untuk mensimulasikan penyembunyian elemen dengan memanfaatkan animasi dan memanipulasi keterlihatan elemen.

Pelaksanaan:

1. Buat animasi CSS untuk tempoh yang dikehendaki (5 saat dalam kes ini) menggunakan @keyframes.
2. Dalam animasi, tetapkan ketinggian dan lebar elemen kepada sifar untuk menjadikannya hilang.
3. Gunakan mod-isi-animasi: ke hadapan; untuk memastikan elemen kekal tersembunyi selepas animasi tamat.
4. Selepas kelewatan animasi (5 saat), togol visibility:hidden; pada elemen untuk mengalih keluarnya sepenuhnya daripada paparan.

Fiddle:

Fiddle berikut menunjukkan pelaksanaan CSS:

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#hideMe {
    animation: cssAnimation 0s ease-in 5s forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}

<div>

Teknik ini menyembunyikan elemen dengan berkesan selepas selang masa yang ditentukan, menghalangnya daripada menduduki mana-mana ruang yang kelihatan pada halaman.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan Peralihan CSS untuk Menyembunyikan Elemen Secara Automatik Selepas Kelewatan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!