使用css 動畫也可以回調函數
在做項目中經常會遇到使用動畫的情況。以前的情況是用js寫動畫，利用setTimeout函數或者window.requestAnimationFrame()實現目標元素的動畫效果。
雖然後者解決了刷新頻率和移動頻率同步的問題，但是因為js頻繁地操作dom帶來的額外開銷和復雜的計算公式使得大多數開發者對用原生js動畫望而卻步而取道各種插件動畫。
這其實也是html的一塊軟肋，在網站上做動畫，無論就效果還是性能，JS還是差了flash很多步。所以當html5和css3的標準出現後，這種情況轉變成了多數人從js復雜的動畫轉向了稍微容易的css動畫。
css3為我們提供了很棒的api來實現之前需要費很大的功夫才能實現的功能。只需要很簡單的代碼，任何人都可以快速地學會css動畫。下面是一個動畫沿Y軸的上下遊走的例子(此處均已webkit內核為默認標準，實際情況需要自己兼容):
transform:
.mydiv {
width:100px;
height:100px;
background:red;
-webkit-transition: all 2s;
}
.newClass{
-webkit-transform: translateY(100px)
}
animation:
@-webkit-keyframesmymove {
from {top:0px;}
to {top:200px;}
}
.mydiv {
width:100px;
height:100px;
background:red;
position:relative;
-webkit-animation:mymove 2s forwards; /*Safari and Chrome */
}
以上是目前css動畫經常用到的兩種寫法。就簡潔單的動畫來說一般傾向使用第一種transoform，如果需要在做復雜的轉換，可以使用第二種animation方法，通過在不同的運動幀上寫下該幀的狀態實現。
很多情況下我們需要知道動畫何時完成，以及什麽完成後需要做什麽。也就是說需要一個動畫完成的回調函數。在js動畫中你不需要擔心找不到回調函數，因為動畫本身全依賴於js，回調只不過是一個普通的函數而已。首先，鹵煮也是習慣性地用js思維思考這個問題。既然知道動畫的變化時間，那麽可以用延時解決回掉的問題。下面是延時的方法
//css中代碼可以看到動畫持續2s
var delay= 2000;
setTimtout(function(){
dosomething()
},delay);
上面的方法是不難理解，延時一個函數執行，延時的時長就是動畫變化的時間，這樣，看起來當動畫完成時會立即執行函數。但是，這種方式存在著很多嚴重的缺陷。第一、setTimeout函數和css動畫不一定是一致的。因為動畫開始的時間和setTimeout的時間嚴格來說不是一直的，所以會出現要麽函數提前執行，要麽動畫提前結束。第二、js代碼和css代碼耦合了。delay的時間要隨時跟著css內的時間走，如果css代碼改變或者js代碼改變，兩邊都必須花時間修復同步（也就是改成為一致時間）這增加了工作量。第三、多個動畫會帶來更多的代碼量和不確定因素。因為每一個定時器針對的是單獨的動畫元素，所以動畫元素一多起來就必須添加更多的代碼。第四、無法處理多個動畫元素同一時間結束的情況。等。。。。
以上只是部分發現的缺點，對於復雜的動畫來說，延時函數是完全不能適應。那麽有方法處理動畫的回調嗎？答案當然是肯定的。而且很簡單，跟之前綁定點擊事件是一樣的。js提供了css3中兩種動畫的結束事件。我們利用它們，可以很容易捕獲到動畫的完成情況。
transitionEnd
document.getElementById(‘my‘).addEventListener(‘transitionEnd‘,function(){
alert(‘Transform animation has done!‘);
});
animationend
document.getElementById(‘my‘).addEventListener(‘animationend‘,function(){
alert(‘Animation has done!....‘);
});
我們可以看到，它們對於開發者來說一點也不陌生。不論是用法還是字面名稱，都使得我們能夠一目了然。其實說了啰裏吧嗦一大堆，這篇博客主要就是兩個事件名稱而已。下面是它們的兼容效果。大多數瀏覽器都支持了這兩種事件，基本上支持css3動畫的瀏覽器就會支持這兩種事件。
補充一點：animationend只是animation變化事件中的一種。你應該能想到其他的變化狀態，沒錯就是：animationstart,animationiteration.利用這三種狀態時間，我們可以隨心所欲的控制變化中的動畫效果。尤其是animationiteration事件，能夠讓我們在動畫變化過程中插上一手。
WEB前端學習交流群21 598399936
使用css 動畫也可以回調函數