Bagaimanakah Saya Mengesan Apabila Peralihan CSS3 Bermula dan Berakhir?

Acara Peralihan CSS3

Peralihan CSS3 menyediakan cara yang lancar untuk menambah animasi dan kesan pada halaman web anda. Walau bagaimanapun, untuk mengawal dan menyegerakkan animasi ini dengan berkesan, adalah penting untuk mengetahui bila ia bermula dan berakhir. Masukkan peristiwa peralihan CSS3.

Jenis Peristiwa

Bergantung pada penyemak imbas yang anda gunakan, terdapat peristiwa berbeza yang dicetuskan apabila peralihan CSS3 bermula atau tamat:

• Peralihan CSS W3C Draf:

  • permulaan peralihan (mula)
  • akhir peralihan (tamat)

• Webkit:

  • webkitTransitionEnd (tamat)

• Mozilla:

  • tamat peralihan (tamat)

• Opera:

  • oTransitionEnd (end)

• Internet Penjelajah:

  • tamat peralihan (tamat)

Mendengar Acara

Untuk mendengar acara peralihan CSS3, anda boleh menggunakan pendengar acara JavaScript:

element.addEventListener('transitionend', function(event) {
  // Transition completed
});

Pelayar Keserasian

Ketersediaan peristiwa peralihan CSS3 berbeza-beza merentas pelayar. Rujuk jadual di bawah untuk maklumat keserasian:

Browser	Transition Start Event	Transition End Event
W3C CSS Transitions Draft	Yes	Yes
Webkit	No	Yes
Mozilla	No	Yes
Opera	No	Yes
Internet Explorer	No	Yes

Contoh Penggunaan

Kod berikut menunjukkan cara menggunakan transitionend untuk mendengar penyempurnaan peralihan CSS3:

<div>

Apabila anda menuding pada elemen #box, peralihan akan menganimasikan lebar kepada 200px dengan lancar. Acara peralihan tamat akan dicetuskan apabila peralihan selesai.

Atas ialah kandungan terperinci Bagaimanakah Saya Mengesan Apabila Peralihan CSS3 Bermula dan Berakhir?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!