Memulakan semula Animasi CSS3: Adakah Reflow Alternatif Terbaik untuk Penyingkiran Elemen?

Memulakan semula Animasi CSS3: Alternatif yang Diperbaiki kepada Penyingkiran Elemen

Dalam usaha untuk memulakan semula animasi CSS3, teknik menarik yang sering digunakan melibatkan mengalih keluar elemen animasi daripada dokumen dan memasukkan semula klonnya. Walaupun berkesan, pendekatan ini menawarkan peluang untuk pengoptimuman.

Kaedah yang lebih baik untuk mencapai permulaan semula animasi, seperti yang dicadangkan oleh pakar tanpa nama, melibatkan mencetuskan aliran semula. Ini boleh dicapai hanya dengan mengakses ketinggian HTMLElement, seperti yang ditunjukkan di bawah:

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

Dalam contoh ini, animasi pada mulanya ditetapkan kepada 'tiada', mencetuskan tetapan semula. Selepas itu, aliran semula dimulakan dengan mengakses offsetHeight elemen, yang mengira dan menyimpan saiz elemen, dengan itu menggunakan tetapan semula animasi. Akhir sekali, nilai 'null' yang diberikan kepada gaya animasi membolehkannya dimainkan semula.

Pendekatan berasaskan aliran semula ini padat dan cekap, mengatasi kaedah sebelumnya dalam kesederhanaan dan keberkesanannya.

Atas ialah kandungan terperinci Memulakan semula Animasi CSS3: Adakah Reflow Alternatif Terbaik untuk Penyingkiran Elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!