Eine kurze Diskussion über die Rückrufverarbeitungsmethode der CSS3-Animation-CSS-Tutorial-php.cn

Eine kurze Diskussion über die Rückrufverarbeitungsmethode der CSS3-Animation

高洛峰

Freigeben： 2017-03-07 11:59:37

Original

1225 Leute haben es durchsucht

Wenn wir eine JS-Animation erstellen, müssen wir häufig eine Rückrufverarbeitung durchführen, z. B. das Auslösen eines Ereignisses nach Abschluss einer Animation, das Ausführen einer anderen Animation nach Abschluss einer Animation usw., aber kann dies bei Verwendung einer CSS3-Animation erfasst werden? Was ist mit der Rückrufverarbeitung für den Bewegungsstatus?

CSS3-Animationen können auch mit Rückrufen verarbeitet werden. Sie sind in zwei Attribute unterteilt, eines ist Übergang [w3c-Dokument] und das andere ist Animation [w3c-Dokument].

1. Übergang

Für den Übergang können Sie sich das Übergangsereignis anhören, das ausgelöst wird, wenn die Animation abgeschlossen ist es so:

<!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>

Nach dem Login kopieren

2. Animation

Für Animationen können wir uns das Animationend-Event anhören. Der Beispielcode lautet wie folgt:

<!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>

Nach dem Login kopieren

handelt von der Verarbeitung von CSS3-Animationsrückrufen. Er wurde kürzlich bei der Erstellung von H5-Seiten verwendet.

Der obige Artikel, in dem die Rückrufverarbeitung von CSS3-Animationen kurz erläutert wird, ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, er kann Ihnen eine Referenz geben und hoffe, dass Sie die chinesische PHP-Website unterstützen.

Weitere verwandte Artikel zur Rückrufverarbeitungsmethode der CSS3-Animation finden Sie auf der chinesischen PHP-Website!