Maison > Article > interface Web > Partager un exemple de surveillance d'un événement de fin d'animation CSS3

Partager un exemple de surveillance d'un événement de fin d'animation CSS3

零下一度original: 2017-05-18 14:29:275205parcourir

Lorsque l'animation CSS3 termine une animation, nous voulons garder l'animation dans l'état terminé ou dans un autre événement. Que devons-nous faire ?

On peut écouter l'événement webkitAnimationEnd

// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() {
    console.log("动画结束");
})

-webkit-animation animation a trois événements :

Événement de début : webkitAnimationStart
Événement de fin : webkitAnimationEnd
Événement de mouvement répété : webkitAnimationIteration

// 动画开始时事件o.addEventListener("webkitAnimationStart", function() {
    console.log("动画开始");
})// 动画重复运动时事件o.addEventListener("webkitAnimationIteration", function() {
    console.log("动画重复运动");
})// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() {
    console.log("动画结束");
})

Exemple :

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>webkitAnimationEnd</title><style type="text/css">#p1{
    margin: 200px auto 0;
    width: 200px;
    height: 200px;
    color: #fff;
    background-color: #000;
    -webkit-animation: transform 3s 2 ease;}@-webkit-keyframes transform {
    0%{
        -webkit-transform: scale(1) rotate(50deg);
    }
    30%{
        -webkit-transform: scale(2) rotate(100deg);
    }
    6%{
        -webkit-transform: scale(0.5) rotate(-100deg);
    }
    100%{
        -webkit-transform: scale(1) rotate(0);

    }}</style></head><body><p id="p1"></p><script type="text/javascript">var o = document.getElementById("p1");// 动画开始时事件o.addEventListener("webkitAnimationStart", function() {
    alert("动画开始");
})// 动画重复运动时事件o.addEventListener("webkitAnimationIteration", function() {
    alert("动画重复运动");
})// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() {    this.className = "";
    alert("动画结束");
})</script></body></html>

Transition d'attribut de transition CSS3, à la fin de animation Il existe également un événement de fin : webkitTransitionEnd

Remarque : il n'y a qu'un seul événement pour la transition

[Recommandations associées]

1. > Introduction détaillée à l'attribut animation-direction en CSS3

8 attributs majeurs de l'animation CSS3 (Animation) qu'il faut maîtriser

3. 🎜>Utiliser l'animation Exemple de tutoriel sur l'exécution différée entre les boucles à l'aide d'attributs

Explication détaillée des deux méthodes de pause (transition, animation) en CSS3

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction détaillée à l'attribut animation-direction en CSS3Article suivant：Introduction détaillée à l'attribut animation-direction en CSS3

Articles Liés

Voir plus