DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> 關於CSS >> 淺談CSS3動畫的回調處理
淺談CSS3動畫的回調處理
編輯：關於CSS     

我們在做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動畫回調處理的一些內容，最近在做H5頁面時用到了，總結一下。

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

原文地址：http://www.cnblogs.com/androidshouce/archive/2016/07/21/5690438.html

關於CSS
用css樣式表實現首字大寫
 　　css當中有許多平時很少用的屬性，但是這些屬性有時候被發掘出來以後就會立刻引起一些人
CSS定位屬性Position詳解
CSS中最常用的布局類屬性，一個是Float(CSS浮動屬性Float詳解)，另一個就是CSS定位屬
無需JS和jQuery代碼實現CSS3鼠標浮動放大圖片
無需JS和jQuery代碼實現CSS3鼠標浮動放大圖片<html><head>

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
用CSS來控制網頁背景 CSS基礎教程:CSS的color顏色 CSS 選擇器(Selectors)、屬性(Properties)、值(Values) 深入解析動態加載css的實現方法 CSS中內聯元素與塊級元素 淺談css中vertical-align和line-height的用法 正確使用CSS的height和min-height css照片有如層疊效果的實現方法 淺談css3中的前綴 關於css旋轉動畫效果的簡單實現
熱門推薦
select元素中設置padding效果的方法 捷足先登學用CSS：HTML結構化 元素絕對定位以後設置了高寬,a標簽不能點擊的原因及解決方法 用CSS縮寫給你的網站加速 用CSS制作三角形和按鈕的簡單實例 CSS常用技巧匯總 CSS3 box-sizing屬性詳解 利用CSS3實現折角效果實例源碼 CSS在IE和Firefox兼容要點分析
大家都在看
jQuery的css()方法用法實例教程 Js根據時間彈出廣告代碼 解析jquery中的ajax緩存問題 網站可用性設計:可讀性（readability）和易讀性（legibility） JAVA中toString方法的作用 JavaScript操作XML/HTML比較常用的對象屬性集錦 用CSS自定義滾動條的樣式 jquery動態加載js/css文件方法(自寫小函數)
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved