Bagaimana Saya Boleh Mulakan Semula Animasi CSS3 dengan Cekap?

Memulakan semula Animasi CSS3: Dipermudahkan

Dalam dunia animasi CSS3, adalah perkara biasa untuk menghadapi senario di mana anda perlu memulakan semula animasi pada permintaan. Walaupun terdapat pelbagai pendekatan untuk mencapai matlamat ini, satu yang telah mencetuskan rasa ingin tahu ialah teknik mengalih keluar dan memasukkan semula elemen animasi. Walaupun berfungsi, ia memberi ruang untuk pengoptimuman.

Kaedah Diperkemas

Syukurlah, terdapat cara yang lebih elegan dan cekap untuk memulakan semula animasi CSS3: menggunakan aliran semula untuk memaksa kemas kini kepada gaya elemen. Dengan mengalih keluar gaya animasi buat sementara waktu, mencetuskan aliran semula dan kemudian mengembalikan semula animasi, anda boleh menetapkan semula dengan berkesan tanpa memperkenalkan kerumitan yang tidak perlu.

Pelaksanaan Praktikal

Berikut ialah JavaScript fungsi yang menunjukkan pendekatan ini:

function reset_animation() {
  var el = document.getElementById('animated');
  el.style.animation = 'none';
  el.offsetHeight; /* trigger reflow */
  el.style.animation = null; 
}

Mengiringi ini fungsi, tentukan peraturan CSS untuk elemen animasi dan animasi bingkai utama, seperti yang digambarkan di bawah:

#animated {
  position: absolute;
  top: 70px;
  width: 50px; height: 50px;
  background-color: black;
  animation: bounce 3s ease-in-out infinite;
}
@keyframes bounce {
  0% { left: 0; }
  50% { left: calc( 100% - 50px ); }
  100% { left: 0; }
}

Akhir sekali, masukkan penanda HTML:

<div>

Pendekatan ini memulakan semula animasi dengan berkesan pada bila-bila masa anda mengklik butang "Tetapkan Semula", tanpa memerlukan tamat masa yang rumit atau manipulasi elemen.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Mulakan Semula Animasi CSS3 dengan Cekap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!