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-keyframes mymove {
	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);

上面的方法是不難理解，延時一個函數執行，延時的時長就是動畫變化的時間，這樣，看起來當動畫完成時會當即執行函數。可是，這種方式存在着不少嚴重的缺陷。第1、setTimeout函數和css動畫不必定是一致的。由於動畫開始的時間和setTimeout的時間嚴格來講不是一直的，因此會出現要麼函數提早執行，要麼動畫提早結束。第2、js代碼和css代碼耦合了。delay的時間要隨時跟着css內的時間走，若是css代碼改變或者js代碼改變，兩邊都必須花時間修復同步（也就是改爲爲一致時間）這增長了工做量。第3、多個動畫會帶來更多的代碼量和不肯定因素。由於每個定時器針對的是單獨的動畫元素，因此動畫元素一多起來就必須添加更多的代碼。第4、沒法處理多個動畫元素同一時間結束的狀況。等。。。。

以上只是部分發現的缺點，對於複雜的動畫來講，延時函數是徹底不能適應。那麼有方法處理動畫的回調嗎？答案固然是確定的。並且很簡單，跟以前綁定點擊事件是同樣的。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事件，可以讓咱們在動畫變化過程當中插上一手。