Bagaimana untuk Memulakan Semula Animasi CSS3 Tanpa Mengalih Keluar Elemen?

Memulakan semula Animasi CSS3: Pendekatan yang Lebih Baik daripada Penyingkiran Elemen

Apabila bekerja dengan animasi CSS3, keperluan untuk memulakan semula animasi selepas interaksi pengguna boleh timbul. Senario biasa ialah bar kemajuan yang memaparkan baki masa dan memerlukan tetapan semula selepas selesai. Semasa mengalih keluar dan memasukkan semula elemen animasi boleh memulakan semula animasi, ia melibatkan manipulasi DOM yang tidak perlu.

Kaedah Alternatif Menggunakan Reflow

Pendekatan yang lebih cekap melibatkan mencetuskan penyemak imbas reflow untuk menggunakan perubahan animasi. Ini boleh dicapai dengan fungsi JavaScript berikut:

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

Dalam contoh ini, kami memilih elemen animasi (#animated) dan menetapkan sementara animasinya kepada tiada. Ini menjeda animasi tanpa menetapkan semula kemajuannya. Seterusnya, kami menggunakan offsetHeight untuk memaksa aliran semula, yang memastikan semua gaya CSS digunakan. Akhir sekali, kami menetapkan sifat animasi kembali kepada nilai asalnya, mencetuskan animasi untuk dimulakan semula daripada keadaan asalnya.

Contoh Pelaksanaan

Dalam coretan HTML dan CSS berikut , kami mempunyai bar kemajuan yang melantun merentasi skrin:

<div>

#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; }
}

Mengklik butang "Tetapkan Semula" menggunakan fungsi reset_animation(), memulakan semula animasi tanpa sebarang kelewatan yang ketara atau overhed manipulasi DOM.

Kesimpulan

Menggunakan aliran semula penyemak imbas untuk menggunakan perubahan animasi memberikan yang lebih cekap dan penyelesaian yang elegan untuk memulakan semula animasi CSS3. Ia menghapuskan keperluan untuk mengalih keluar elemen dan memasukkan semula, menghasilkan pengalaman pengguna yang lebih lancar dan berprestasi.

Atas ialah kandungan terperinci Bagaimana untuk Memulakan Semula Animasi CSS3 Tanpa Mengalih Keluar Elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!