tutorial pengembangan web terbaru
 

animationend Acara

<Object Acara

Contoh

Lakukan sesuatu dengan <div> elemen ketika animasi CSS telah berakhir:

var x = document.getElementById("myDIV");

// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);

// Standard syntax
x.addEventListener("animationend", myEndFunction);
Cobalah sendiri "

Definisi dan Penggunaan

Acara animationend terjadi ketika animasi CSS telah selesai.

Untuk informasi lebih lanjut tentang CSS Animasi, lihat tutorial kami pada CSS3 Animasi .

Ketika animasi CSS memainkan, ada tiga peristiwa yang dapat terjadi:

  • animationstart - terjadi ketika CSS animasi telah dimulai
  • animationiteration - terjadi ketika CSS animasi diulang
  • animationend - terjadi ketika animasi CSS telah menyelesaikan

Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang mendukung penuh acara tersebut.

Nomor diikuti oleh "webkit" atau "moz" tentukan versi pertama yang bekerja dengan awalan.

Peristiwa
animationend 4.0 webkit 10,0 16.0
5.0 moz
4.0 webkit 15,0 webkit
12.1

Catatan: Untuk Chrome, Safari dan Opera, menggunakan awalan webkitAnimationEnd.


Sintaksis

object.addEventListener("webkitAnimationEnd", myScript );  // Code for Chrome, Safari and Opera
object
.addEventListener("animationend", myScript );        // Standard syntax

Catatan: addEventListener() metode tidak didukung di Internet Explorer 8 dan versi sebelumnya.


Rincian teknis

Gelembung: iya nih
dibatalkan: Tidak
jenis acara: AnimationEvent
DOM Versi: Level 3 Acara

Pages terkait

CSS Tutorial: CSS3 Animasi

CSS Referensi: CSS3 animation Property

HTML DOM referensi: Style animation Property


<Object Acara