Partager un exemple de surveillance d'un événement de fin d'animation CSS3-tutoriel CSS-php.cn

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

零下一度

Libérer： 2017-05-18 14:29:27

original

5233 Les gens l'ont consulté

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("动画结束");
})

Copier après la connexion

-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("动画结束");
})

Copier après la connexion

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>

Copier après la connexion

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!