animationend-tapahtuma

DOM-tapahtumat AnimationEvent

Määritelmä ja käyttö

Kun CSS-animaatio on valmis, tapahtuu animationend-tapahtuma.

Lisätietoja CSS-animaatioista, tutki kurssiamme: CSS3-animaatiotutkimus.

Kun CSS-animaatio näytetään, voi tapahtua kolme tapahtumaa:

Esimerkki

Tee jotain <div>-elementille, kun CSS-animaatio päättyy:

var x = document.getElementById("myDIV");
// Chrome, Safari ja Operan kohderyhmän koodi
x.addEventListener("webkitAnimationEnd", myEndFunction);
// Standardinen syntaksi
x.addEventListener("animationend", myEndFunction);

Kokeile itse

Syntaksi

objekti.addEventListener("webkitAnimationEnd", myScript);  // Chrome, Safari ja Operan kohderyhmän koodi
objekti.addEventListener("animationend", myScript);        // Standardinen syntaksi

Huomautus:Internet Explorer 8 ja aikaisemmat versiot eivät tue addEventListener() -menetelmä.

Tekninen yksityiskohta

Päihteet: Tuetu
Peruutettavissa: Ei tuettu
Tapahtumatyypit: AnimationEvent
DOM-versio: Taso 3 tapahtumat

Selaimen tuki

Taulukossa olevat numerot mainitsevat ensimmäisen selaimen version, joka tukee tapahtumaa täysin.

Luvun jälkeen "webkit" tai "moz" mainitsee ensimmäisen version, jota etuliite käytetään.

Tapahtuma Chrome IE Firefox Safari Opera
animationend 4.0 webkit 10.0 16.0
5.0 moz		 4.0 webkit 15.0 webkit
12.1

Huomautus:Chrome, Safari ja Opera käyttävät webkitAnimationEnd.

Liittyvät sivut

CSS oppimispaketti:CSS3-animointi

CSS viittomakirja:CSS3 animation-ominaisuus

HTML DOM viittomakirja:Style animation-ominaisuus

DOM-tapahtumat AnimationEvent