溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

CSS3動(dòng)畫怎么做回調(diào)處理

發(fā)布時(shí)間：2021-08-10 17:40:24 來(lái)源：億速云 閱讀：123 作者：chen 欄目：web開發(fā)

本篇內(nèi)容介紹了“CSS3動(dòng)畫怎么做回調(diào)處理”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

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

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

1、transition

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <!DOCTYPE html>  

  2. <html lang="en">  

  3. <head>  

  4.     <meta charset="UTF-8">  

  5.     <title>css3-transitionend - BeyondWeb</title>  

  6.     <style>  

  7.         * {margin: 0; padding: 0;}   

  8.         .rect {   

  9.             width: 100px;   

  10.             height: 100px;   

  11.             background-color: #f80;   

  12.             -webkit-transition: all .5s;   

  13.         }   

  14.     </style>  

  15.     <script>  

  16.         window.onload = function () {   

  17.             var _rect = document.querySelector('.rect');   

  18.             _rect.onclick = function () {   

  19.                 _rect.style.webkitTransform = 'translateX(300px)';   

  20.             }   

  21.   

  22.             _rect.addEventListener('webkitTransitionEnd', function () {   

  23.                 alert('動(dòng)畫執(zhí)行完畢！');   

  24.                 // callback here   

  25.             }, false);   

  26.         }   

  27.     </script>  

  28. </head>  

  29. <body>  

  30.     <div class="rect"></div>  

  31. </body>  

  32. </html>  

2、animation

對(duì)于animation我們可以監(jiān)聽animationend事件，示例代碼如下：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <!DOCTYPE html>  

  2. <html lang="en">  

  3. <head>  

  4.     <meta charset="UTF-8">  

  5.     <title>css3-animationend - BeyondWeb</title>  

  6.     <style>  

  7.         * {margin: 0; padding: 0;}   

  8.         .rect {   

  9.             position: relative;   

  10.             width: 100px;   

  11.             height: 100px;   

  12.             background-color: #f80;   

  13.         }   

  14.   

  15.         @-webkit-keyframes move {   

  16.             from {   

  17.                 -webkit-transform: rotate(0);   

  18.             }   

  19.             to {   

  20.                 -webkit-transform: rotate(360deg);   

  21.             }   

  22.         }   

  23.     </style>  

  24.     <script>  

  25.         window.onload = function () {   

  26.             var _rect = document.querySelector('.rect');   

  27.             _rect.onclick = function () {   

  28.                 _rect.style.webkitAnimation = 'move 3s';   

  29.             }   

  30.   

  31.             _rect.addEventListener('webkitAnimationEnd', function () {   

  32.                 alert('動(dòng)畫執(zhí)行完畢！');   

  33.                 // callback here   

  34.             }, false);   

  35.         }   

  36.     </script>  

  37. </head>  

  38. <body>  

  39.     <div class="rect"></div>  

  40. </body>  

  41. </html>  

“CSS3動(dòng)畫怎么做回調(diào)處理”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

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

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手