91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

CSS3動畫怎么做回調處理

發布時間:2021-08-10 17:40:24 來源:億速云 閱讀:128 作者:chen 欄目:web開發

本篇內容介紹了“CSS3動畫怎么做回調處理”的有關知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠學有所成!

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

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

1、transition

對于transition,可以監聽transitionend事件,當動畫完成時觸發,可以這樣使用:

XML/HTML Code復制內容到剪貼板

  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('動畫執行完畢!');   

  24.                 // callback here   

  25.             }, false);   

  26.         }   

  27.     </script>  

  28. </head>  

  29. <body>  

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

  31. </body>  

  32. </html>  

2、animation

對于animation我們可以監聽animationend事件,示例代碼如下:

XML/HTML Code復制內容到剪貼板

  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('動畫執行完畢!');   

  33.                 // callback here   

  34.             }, false);   

  35.         }   

  36.     </script>  

  37. </head>  

  38. <body>  

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

  40. </body>  

  41. </html>  

“CSS3動畫怎么做回調處理”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站,小編將為大家輸出更多高質量的實用文章!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

环江| 阆中市| 虹口区| 罗江县| 洛川县| 广宁县| 富宁县| 盱眙县| 兰坪| 平和县| 手游| 铁力市| SHOW| 福清市| 渭南市| 湖州市| 仙游县| 邵东县| 西昌市| 关岭| 阜新| 九江县| 湛江市| 炉霍县| 乃东县| 合江县| 舞阳县| 辽宁省| 保德县| 平遥县| 六盘水市| 漳平市| 康马县| 漯河市| 葵青区| 吉水县| 横山县| 扎赉特旗| 岗巴县| 武夷山市| 万盛区|