淺談CSS3動畫的回調處理方法-css教學-PHP中文網

淺談CSS3動畫的回調處理方法

高洛峰

發布： 2017-03-07 11:59:37

原創

1261 人瀏覽過

我們在做js動畫的時候，很多時候都需要做回調處理，如在一個動畫完成後觸發一個事件、一個動畫完成後執行另外一個動畫等等，但在使用CSS3動畫時能不能捕獲到運動的狀態做回調處理呢？

CSS3動畫也是可以做回呼處理的，這裡分成兩個屬性，一個是transition[w3c文件]，另外一個是animation[w3c文件]。

1、transition

對於transition，可以監聽transitionend事件，當動畫完成時觸發，可以這樣使用：

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

登入後複製

2、animation

#對於animation我們可以監聽animationend事件，範例程式碼如下：

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

登入後複製

#就是關於CSS3動畫回呼處理的一些內容，最近在做H5頁面時用到了，總結一下。

以上這篇淺談CSS3動畫的回呼處理就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持PHP中文網。

更多淺談CSS3動畫的回呼處理方法相關文章請關注PHP中文網！