CSS3動畫效果怎么做回調(diào)處理

發(fā)布時間：2021-07-30 15:48:56 來源：億速云閱讀：168 作者：chen 欄目：web開發(fā)

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

我們在做js動畫的時候，很多時候都需要做回調(diào)處理，如在一個動畫完成后觸發(fā)一個事件、一個動畫完成后執(zhí)行另外一個動畫等等，但在使用CSS3動畫時能不能捕獲到運動的狀態(tài)做回調(diào)處理呢？

CSS3動畫也是可以做回調(diào)處理的，這里分為兩個屬性，一個是transition[w3c文檔]，另外一個是animation[w3c文檔]。

1、transition

對于transition，可以監(jiān)聽transitionend事件，當(dāng)動畫完成時觸發(fā)，可以這樣使用：

代碼如下:

<!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('動畫執(zhí)行完畢！');
                // callback here
            }, false);
        }
    </script>
</head>
<body>
    <div class="rect"></div>
</body>
</html>

2、animation

對于animation我們可以監(jiān)聽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('動畫執(zhí)行完畢！');
                // callback here
            }, false);
        }
    </script>
</head>
<body>
    <div class="rect"></div>
</body>
</html>

到此，關(guān)于“CSS3動畫效果怎么做回調(diào)處理”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

向AI問一下細(xì)節(jié)

CSS3動畫效果怎么做回調(diào)處理

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽