CSS3動畫效果怎么做回調處理

這篇文章主要介紹“CSS3動畫效果怎么做回調處理”，在日常操作中，相信很多人在CSS3動畫效果怎么做回調處理問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS3動畫效果怎么做回調處理”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

我們提供的服務有：成都網站建設、網站制作、微信公眾號開發、網站優化、網站認證、霍邱ssl等。為1000多家企事業單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的霍邱網站制作公司

我們在做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('.rect');
            _rect.onclick = function () {
                _rect.style.webkitTransform = 'translateX(300px)';
            }</p>
<p>            _rect.addEventListener('webkitTransitionEnd', function () {
                alert('動畫執行完畢！');
                // callback here
            }, false);
        }
    </script>
</head>
<body>
    <div class="rect"></div>
</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;
        }</p>
<p>        @-webkit-keyframes move {
            from {
                -webkit-transform: rotate(0);
            }
            to {
                -webkit-transform: rotate(360deg);
            }
        }
    </style>
    <script>
        window.onload = function () {
            var _rect = document.querySelector('.rect');
            _rect.onclick = function () {
                _rect.style.webkitAnimation = 'move 3s';
            }</p>
<p>            _rect.addEventListener('webkitAnimationEnd', function () {
                alert('動畫執行完畢！');
                // callback here
            }, false);
        }
    </script>
</head>
<body>
    <div class="rect"></div>
</body>
</html>

到此，關于“CSS3動畫效果怎么做回調處理”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注創新互聯網站，小編會繼續努力為大家帶來更多實用的文章！

標題名稱：CSS3動畫效果怎么做回調處理
標題路徑：http://vcdvsql.cn/article36/pejcsg.html

成都網站建設公司_創新互聯，為您提供Google、用戶體驗、移動網站建設、搜索引擎優化、網站設計、自適應網站

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

CSS3動畫效果怎么做回調處理