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:275198parcourir

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

2

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

4

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