Bagaimana Anda Mengesan Permulaan dan Tamat Peralihan CSS3?

Acara Peralihan CSS3

Apabila bekerja dengan peralihan CSS3, selalunya berguna untuk mengetahui apabila peralihan telah bermula atau berakhir. Dalam CSS3, terdapat pelbagai peristiwa yang dicetuskan oleh elemen untuk menunjukkan peralihan ini.

Acara Tamat Peralihan CSS

Definisi:
Tamat peralihan peristiwa dicetuskan apabila peralihan CSS selesai untuk sifat yang ditentukan.

Sintaks:

element.addEventListener('transitionend', callbackFunction, { once: true });

Contoh:

const box = document.querySelector('.box');

box.addEventListener('transitionend', function(e) {
  console.log(`Transition for property ${e.propertyName} has ended.`);
}, { once: true });

Acara Peralihan Lain

Di luar acara peralihan akhir, beberapa penyemak imbas turut menyediakan acara tambahan:

Acara Khusus Webkit:

• webkitTransitionStart: Dicetuskan apabila peralihan CSS bermula.
• webkitTransitionRun: Dicetuskan beberapa kali semasa peralihan CSS.

Acara Khusus Mozilla:

• permulaan peralihan: Dicetuskan apabila peralihan CSS pada mana-mana sifat bermula.

Acara Khusus Opera:

• oTransitionStart: Dicetuskan apabila peralihan CSS pada mana-mana sifat bermula.

Internet Acara Penjelajah:

• MSTransitionEnd: Dicetuskan apabila peralihan CSS pada mana-mana sifat tamat.

Keserasian Penyemak Imbas

Acara di atas disokong dalam pelbagai penyemak imbas mengikut spesifikasi yang disediakan dalam Draf Peralihan CSS W3C dan dokumentasi penyemak imbas masing-masing.

Atas ialah kandungan terperinci Bagaimana Anda Mengesan Permulaan dan Tamat Peralihan CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!