Comment capturer les événements d'animation CSS3 en JavaScript

Points clés

• JavaScript peut gérer les animations CSS3 en ajoutant des gestionnaires d'événements aux éléments, permettant un contrôle fin des animations, telles que les jouer en séquence. Il existe trois types d'événements qui peuvent être capturés: "AnimationStart", "Animationitration" et "AnimationEnd".
• La compatibilité entre les navigateurs de ces événements d'animation peut être réalisée en appelant addEventListener pour tous les noms préfixés et non préfixés à l'aide de fonctions personnalisées. Cela permet au gestionnaire d'événements d'être attribué à l'aide d'une ligne de code.
• L'objet de l'événement transmis à la fonction d'écoute d'animation fournit le nom d'animation et le temps écoulé depuis le début de l'animation. Cela peut être utilisé pour détecter quand une animation particulière se termine et exécuter un autre code, comme l'application d'une autre animation CSS3 dans un ordre spécifique.

Les animations CSS3 sont lisses et faciles à implémenter, mais contrairement à JavaScript, il n'a pas de contrôle cadre par trame. Heureusement, vous pouvez appliquer des gestionnaires d'événements à n'importe quel élément pour déterminer l'état d'animation. Cela permet un contrôle fin, comme la lecture de différentes animations en séquence.

Considérons cette simple animation CSS3:

#anim.enable {
  -webkit-animation: flash 1s ease 3;
  -moz-animation: flash 1s ease 3;
  -ms-animation: flash 1s ease 3;
  -o-animation: flash 1s ease 3;
  animation: flash 1s ease 3;
}

/* 动画 */
@-webkit-keyframes flash {
  50% { opacity: 0; }
}

@-moz-keyframes flash {
  50% { opacity: 0; }
}

@-ms-keyframes flash {
  50% { opacity: 0; }
}

@-o-keyframes flash {
  50% { opacity: 0; }
}

@keyframes flash {
  50% { opacity: 0; }
}

Lorsque la classe enable est appliquée à un élément avec id anim, une animation nommée flash s'exécutera trois fois. Chaque itération dure une seconde, au cours de laquelle l'élément s'estompe puis s'estompe.

Trois types d'événements seront déclenchés lorsque l'animation se produit:

animationstart

var anim = document.getElementById("anim");
anim.addEventListener("animationstart", AnimationListener, false);

L'événement

animationstart est licencié lorsque l'animation est démarrée.

animationiteration

anim.addEventListener("animationiteration", AnimationListener, false);

Les événements

animationiteration sont tirés au début de chaque nouvelle itération d'animation, c'est-à-dire chaque itération sauf la première itération.

animationend

anim.addEventListener("animationend", AnimationListener, false);

animationend L'événement tire à la fin de l'animation.

Compatibilité du navigateur

Au moment de la rédaction, Firefox, Chrome, Safari, Opera et IE10 prennent en charge les animations CSS3 et les gestionnaires d'événements connexes. De plus, les navigateurs Opera, IE10 et WebKit utilisent des préfixes et ont apporté des modifications à cas pour assurer la faillite ...

W3C Standard Firefox Webkit Opera IE10 animationstart animationstart webkitAnimationStart oanimationstart MSAnimationStart animationiteration animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration animationend animationend webkitAnimationEnd oanimationend MSAnimationEnd

addEventListener

var pfx = ["webkit", "moz", "MS", "o", ""];
function PrefixedEvent(element, type, callback) {
    for (var p = 0; p < pfx.length; p++) {
        if (!pfx[p]) type = type.toLowerCase();
        element.addEventListener(pfx[p] + type, callback, false);
    }
}

La façon la plus simple de résoudre le problème du préfixe est d'utiliser une fonction personnalisée pour appeler tous les noms préfixés et non préfixés : Les gestionnaires d'événements croisés peuvent désormais être attribués à l'aide d'une ligne de code:

#anim.enable {
  -webkit-animation: flash 1s ease 3;
  -moz-animation: flash 1s ease 3;
  -ms-animation: flash 1s ease 3;
  -o-animation: flash 1s ease 3;
  animation: flash 1s ease 3;
}

/* 动画 */
@-webkit-keyframes flash {
  50% { opacity: 0; }
}

@-moz-keyframes flash {
  50% { opacity: 0; }
}

@-ms-keyframes flash {
  50% { opacity: 0; }
}

@-o-keyframes flash {
  50% { opacity: 0; }
}

@keyframes flash {
  50% { opacity: 0; }
}

Objet de l'événement

Dans le code ci-dessus, la fonction AnimationListener est appelée chaque fois qu'un événement d'animation se produit. Un objet d'événement est passé en un seul paramètre. En plus des propriétés et méthodes standard, il fournit également:

• animationName: Nom de l'animation CSS3 (c'est-à-dire flash)
• elapsedTime: temps (en secondes) depuis le début de l'animation.

Par conséquent, nous pouvons détecter quand l'animation flash se termine, par exemple:

var anim = document.getElementById("anim");
anim.addEventListener("animationstart", AnimationListener, false);

Par exemple, le code peut supprimer une classe existante ou appliquer une autre animation CSS3 dans un ordre spécifique.

Voir la démonstration de l'événement d'animation CSS3 en javascript

La page de démonstration affiche un bouton. Lorsque vous cliquez dessus, la classe "Activer" est basculée, commençant ainsi l'animation flash. Lorsque l'événement d'animation est déclenché, le statut s'affiche dans la console. Une fois l'animation terminée, la classe "Activer" sera supprimée afin que le bouton puisse cliquer à nouveau.

Si vous utilisez la capture d'événements animés dans n'importe quel projet intéressant, faites-le moi savoir.

(Si vous aimez lire cet article, vous allez adorer l'apprentissage; c'est où acquérir de nouvelles compétences et compétences de maîtres. CSS3 pour le monde réel)

(Les commentaires de cet article sont fermés. Y a-t-il des questions sur CSS? Pourquoi ne pas demander sur notre forum?)

FAQS (FAQ) sur les animations CSS3 et les gestionnaires d'événements JavaScript

Que sont les animations CSS3 et les gestionnaires d'événements JavaScript?

L'animation CSS3 est une fonctionnalité de CSS3 (Cascading Styleshets) qui vous permet d'animer les éléments HTML sans utiliser JavaScript ou Flash. Il fournit un moyen de créer des animations simples directement dans le code CSS sans aucune ressource supplémentaire. D'un autre côté, les gestionnaires d'événements JavaScript sont des fonctions en JavaScript qui déclenchent lorsque des événements spécifiques se produisent. Ces événements peuvent être des événements tels qu'un utilisateur cliquant sur un bouton, le chargement de la page ou la fin d'une animation. Utilisez les animations CSS3 et les gestionnaires d'événements JavaScript pour créer un contenu Web interactif dynamique.

Comment utiliser le gestionnaire d'événements JavaScript avec des animations CSS3?

Pour utiliser le gestionnaire d'événements JavaScript avec CSS3 Animations, vous devez ajouter un écouteur d'événements à l'élément HTML que vous souhaitez animer. Cet écouteur d'événements déclenchera la fonction JavaScript à la fin de l'animation. Voici un exemple de base:

anim.addEventListener("animationiteration", AnimationListener, false);

Dans ce code, "AnimationEnd" est l'événement sur lequel nous écoutons, qui tire lorsque l'animation CSS3 est terminée.

Puis-je utiliser des gestionnaires d'événements JavaScript avec des transitions CSS3?

Oui, vous pouvez utiliser des gestionnaires d'événements JavaScript avec des transitions CSS3 comme vous le faites avec les animations CSS3. L'événement que vous devez écouter est "TransitionEnd". Cet événement est licencié une fois la transition CSS terminée.

Comment utiliser JavaScript pour contrôler l'heure des animations CSS3?

Vous pouvez utiliser JavaScript pour contrôler le temps de l'animation CSS3 à l'aide de la propriété "Animation-Delay". Cette propriété définit le retard dans le début de l'animation. Vous pouvez définir cette propriété en javascript comme ceci:

#anim.enable {
  -webkit-animation: flash 1s ease 3;
  -moz-animation: flash 1s ease 3;
  -ms-animation: flash 1s ease 3;
  -o-animation: flash 1s ease 3;
  animation: flash 1s ease 3;
}

/* 动画 */
@-webkit-keyframes flash {
  50% { opacity: 0; }
}

@-moz-keyframes flash {
  50% { opacity: 0; }
}

@-ms-keyframes flash {
  50% { opacity: 0; }
}

@-o-keyframes flash {
  50% { opacity: 0; }
}

@keyframes flash {
  50% { opacity: 0; }
}

Dans ce code, l'animation commencera après le chargement de la page pendant 2 secondes.

Comment répéter les animations CSS3 à l'aide de JavaScript?

Vous pouvez répéter les animations CSS3 à l'aide de JavaScript à l'aide de la propriété "Animation-iteration-Count". Cette propriété spécifie le nombre de fois que l'animation doit être jouée. Vous pouvez définir cette propriété en javascript comme ceci:

var anim = document.getElementById("anim");
anim.addEventListener("animationstart", AnimationListener, false);

Dans ce code, l'animation sera répétée indéfiniment.

Puis-je modifier la vitesse des animations CSS3 à l'aide de JavaScript?

Oui, vous pouvez modifier la vitesse des animations CSS3 à l'aide de JavaScript. La propriété "Durée d'animation" contrôle la durée qu'il faut à l'animation pour terminer un cycle. Vous pouvez définir cette propriété en javascript comme ceci:

anim.addEventListener("animationiteration", AnimationListener, false);

Dans ce code, l'animation durera 2 secondes.

Comment faire une pause et restaurer les animations CSS3 à l'aide de JavaScript?

Vous pouvez faire une pause et restaurer les animations CSS3 à l'aide de JavaScript à l'aide de la propriété "Animation-Play-State". Cette propriété définit si l'animation est en cours d'exécution ou une pause. Vous pouvez définir cette propriété en javascript comme ceci:

anim.addEventListener("animationend", AnimationListener, false);

Dans ce code, l'animation sera interrompue.

Puis-je modifier l'orientation des animations CSS3 à l'aide de JavaScript?

Oui, vous pouvez modifier l'orientation de votre animation CSS3 à l'aide de JavaScript. La propriété "Animation-Direction" définit si l'animation doit être jouée à l'envers pendant un cycle en alternance. Vous pouvez définir cette propriété en javascript comme ceci:

var pfx = ["webkit", "moz", "MS", "o", ""];
function PrefixedEvent(element, type, callback) {
    for (var p = 0; p < pfx.length; p++) {
        if (!pfx[p]) type = type.toLowerCase();
        element.addEventListener(pfx[p] + type, callback, false);
    }
}

Dans ce code, l'animation jouera en arrière.

Comment utiliser JavaScript pour détecter la fin d'une animation CSS3?

Vous pouvez utiliser JavaScript pour détecter la fin d'une animation CSS3 en ajoutant un auditeur d'événements à l'événement "AnimationEnd". Cet événement est licencié une fois l'animation CSS3 terminée. Voici comment le faire:

// 动画侦听器事件
PrefixedEvent(anim, "AnimationStart", AnimationListener);
PrefixedEvent(anim, "AnimationIteration", AnimationListener);
PrefixedEvent(anim, "AnimationEnd", AnimationListener);

Puis-je modifier la fonction d'animation de l'animation CSS3 à l'aide de JavaScript?

Oui, vous pouvez modifier la "fonction d'animation-timing-fonction" des animations CSS3 à l'aide de JavaScript. Cette propriété spécifie la courbe de vitesse de l'animation. Vous pouvez définir cette propriété en javascript comme ceci:

if (e.animationName == "flash" &&
    e.type.toLowerCase().indexOf("animationend") >= 0) {
    ...
}

Dans ce code, l'animation commencera lentement puis accélérera.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!