Bolehkah Anda Menyembunyikan Elemen Selepas Kelewatan Menggunakan Peralihan CSS Tulen?

Menyembunyikan Elemen dengan CSS Selepas Kelewatan

Menghapuskan keperluan untuk penyelesaian jQuery, soalan ini meneroka sama ada ia boleh dilakukan untuk menyembunyikan elemen 5 saat selepas dimuatkan halaman menggunakan CSS semata-mata peralihan.

Pendekatan Inovatif

Memandangkan animasi dan peralihan CSS lazimnya berputar di sekitar mengubah suai sifat seperti dimensi atau keterlihatan, kaedah standard untuk menyembunyikan elemen (cth., menetapkan paparan untuk disembunyikan) tidak berkenaan di sini.

Oleh itu, urutan animasi tersuai menyelesaikan cabaran ini. Dengan menganimasikan ketinggian dan lebar kepada sifar selepas 5 saat, elemen itu hilang secara berkesan daripada pandangan sementara masih tidak menduduki ruang dalam reka letak. Pada masa yang sama, menetapkan keterlihatan kepada tersembunyi memastikan ia kekal tidak dapat dilihat oleh pengguna.

Pelaksanaan dan Contoh

Kod berikut menunjukkan cara melaksanakannya penyelesaian:

CSS:

#hideMe {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    -o-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;
        visibility: hidden; /* In WebKit/Blink browsers */
        overflow: hidden;
    }
}

HTML:

<div>

Fiddle:

Lihat penyelesaian dalam tindakan pada JSFiddle: [pautan ke biola]

Atas ialah kandungan terperinci Bolehkah Anda Menyembunyikan Elemen Selepas Kelewatan Menggunakan Peralihan CSS Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!