Une brève discussion sur la méthode de traitement de rappel de l'animation CSS3-tutoriel CSS-php.cn

Une brève discussion sur la méthode de traitement de rappel de l'animation CSS3

高洛峰

Libérer： 2017-03-07 11:59:37

original

1222 Les gens l'ont consulté

Lorsque nous réalisons une animation js, nous devons souvent effectuer un traitement de rappel, comme déclencher un événement après la fin d'une animation, exécuter une autre animation après la fin d'une animation, etc., mais peut-il être capturé lors de l'utilisation d'une animation CSS3 ? Qu’en est-il du traitement des rappels pour l’état du mouvement ?

L'animation CSS3 peut également être traitée avec des rappels. Elle est divisée en deux attributs, l'un est la transition [document w3c] et l'autre est l'animation [document w3c].

1. Transition

Pour la transition, vous pouvez écouter l'événement transitionend, qui est déclenché lorsque l'animation est terminée. comme ceci :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3-transitionend - BeyondWeb</title>
    <style>
        * {margin: 0; padding: 0;}   
        .rect {   
            width: 100px;   
            height: 100px;   
            background-color: #f80;   
            -webkit-transition: all .5s;   
        }   
    </style>
    <script>
        window.onload = function () {   
            var _rect = document.querySelector(&#39;.rect&#39;);   
            _rect.onclick = function () {   
                _rect.style.webkitTransform = &#39;translateX(300px)&#39;;   
            }   

            _rect.addEventListener(&#39;webkitTransitionEnd&#39;, function () {   
                alert(&#39;动画执行完毕！&#39;);   
                // callback here   
            }, false);   
        }   
    </script>
</head>
<body>
    <p class="rect"></p>
</body>
</html>

Copier après la connexion

2. animation

Pour l'animation, nous pouvons écouter l'événement de fin d'animation. L'exemple de code est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3-animationend - BeyondWeb</title>
    <style>
        * {margin: 0; padding: 0;}   
        .rect {   
            position: relative;   
            width: 100px;   
            height: 100px;   
            background-color: #f80;   
        }   

        @-webkit-keyframes move {   
            from {   
                -webkit-transform: rotate(0);   
            }   
            to {   
                -webkit-transform: rotate(360deg);   
            }   
        }   
    </style>
    <script>
        window.onload = function () {   
            var _rect = document.querySelector(&#39;.rect&#39;);   
            _rect.onclick = function () {   
                _rect.style.webkitAnimation = &#39;move 3s&#39;;   
            }   

            _rect.addEventListener(&#39;webkitAnimationEnd&#39;, function () {   
                alert(&#39;动画执行完毕！&#39;);   
                // callback here   
            }, false);   
        }   
    </script>
</head>
<body>
    <p class="rect"></p>
</body>
</html>

Copier après la connexion

concerne le traitement de rappel d'animation CSS3. Il a été utilisé récemment lors de la création de pages H5.

L'article ci-dessus discutant brièvement du traitement de rappel de l'animation CSS3 est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère également que tout le monde soutiendra le site Web PHP chinois.

Pour plus d'articles sur la méthode de traitement de rappel de l'animation CSS3, veuillez faire attention au site Web PHP chinois !