Γεγονός animationiteration

DOM εκδηλώσεις Γεγονός AnimationEvent

Ορισμός και χρήση

Το συμβάν animationiteration συμβαίνει κατά την επανάληψη της CSS Αнимάσης.

Αν Αντικειμενικότητα animation-iteration-count του CSSΟρίζοντας "1", η αнимάση παίζει μόνο μια φορά και δεν συμβαίνει το συμβάν animationiteration. Η αнимάση πρέπει να εκτελείται πολλές φορές για να προκαλέσει το συμβάν.

Για περισσότερες πληροφορίες σχετικά με τις CSS Αнимάσεις, παρακαλώ εξετάστε το μάθημά μας Εκμάθηση CSS3 Αнимάσεων.

Όταν η CSS animation παίζει, μπορεί να συμβεί τρία εκδηλώσεις:

  • animationstart - Γίνεται όταν η CSS animation ξεκινά
  • animationiteration - Γίνεται όταν η CSS animation επαναλαμβάνεται
  • animationend - Γίνεται όταν η CSS animation ολοκληρώνεται

Παράδειγμα

Όταν η CSS animation επαναλαμβάνεται, κάντε κάτι στο στοιχείο <div>:

var x = document.getElementById("myDIV");
// Κώδικας για Chrome, Safari και Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// Τυπική γραμματική
x.addEventListener("animationiteration", myRepeatFunction);

Προσπαθήστε να το δοκιμάσετε

Γραμματική

object.addEventListener("webkitAnimationIteration", myScript);  // Κώδικας για Chrome, Safari και Opera
object.addEventListener("animationiteration", myScript);        // Τυπική γραμματική

Σημείωση:O Internet Explorer 8 και οι προηγούμενες εκδόσεις δεν υποστηρίζουν Μέθοδος addEventListener().

Τεχνικά λεπτομέρειες

Παράπλουση: Υποστηριζόμενο
Κανιέσιμο: Μη υποστηριζόμενο
Τύπος εκδήλωσης: Γεγονός AnimationEvent
Έκδοση DOM: Level 3 Εκδηλώσεις

Υποστήριξη προγράμματος περιήγησης

Ο αριθμός στη τаблицή δείχνει την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως την εκδήλωση.

Ο αριθμός μετά το νούμερο δείχνει την πρώτη έκδοση του προέκτασματος που χρησιμοποιείται.

εκδηλώσεις Chrome IE Firefox Safari Opera
animationiteration 4.0 webkit 10.0 16.0
5.0 moz		 4.0 webkit 15.0 webkit
12.1

Σημείωση:Για Chrome, Safari και Opera, χρησιμοποιήστε το webkitAnimationEnd.

Σχετικές σελίδες

Εκμάθηση CSS:CSS3 animation

Εγχειρίδιο CSS:Η ιδιότητα animation του CSS3

Εγχειρίδιο CSS:Η ιδιότητα animation-iteration-count του CSS3

Εγχειρίδιο HTML DOM:Αντικειμενικότητα animation του Style

DOM εκδηλώσεις Γεγονός AnimationEvent