第四十課：CSS3 transition詳解

W3C中對transition是這樣描述的：容許css的屬性值在必定的時間內平滑的過渡，也就是說，以動畫的效果改變css的屬性值。

transition主要包含4個屬性值：transition-property：樣式名；transition-duration：持續時間；transition-timing-function：緩動公式；transition-delay：延遲多長時間才觸發。接下來咱們來詳細講下這四個屬性值。

transition-property

transition-property是用來指定當元素的哪一個屬性值變化時，就執行transition效果的。主要有如下幾個值：none（沒有屬性會得到過渡效果，也就是說設置了none，此元素不會有過渡效果，就跟沒設置transition同樣）；all（只要元素的任何一個屬性改變，就會有過渡效果，這是默認值）；property（具體的屬性名，能夠有多個，用逗號分開，好比：transition-property: width,height;）；

transition-duration

動畫持續的時間，單位能夠是s，也能夠是ms。咱們能夠多個持續時間值，好比：transition-duration:1s, 1500ms, 2s;transition-property:width,height,color。其中1s對應width屬性改變，1500ms對應height屬性的改變，2s對應color屬性的改變。默認值爲0.

transition-timing-function

緩動公式，根據時間的推動，去改變屬性值的變換速度。它主要有6個值：

ease（逐漸變慢），默認值

linear（勻速）

ease-in（加速）

ease-out（減速），跟ease的區別是，減速的變化程度不同。

ease-in-out（先加速，再減速）

cubic-bezier，容許你自定義一個時間曲線，經過cubic-bezier(x1,y1,x2,y2)，此屬性值能夠模擬以上5個狀態，只要傳入相應的x1,y1,x2,y2給cubic-bezier(x1,y1,x2,y2)。這4個值必須在[0,1]之間，不然無效。

transition-delay

延遲多長時間，才進行變化，單位有s，ms。默認值爲0.

舉個例子來展現下transition如何使用：

<style>

　　#move{

　　　　position:absolute;

　　　　left:0px;

　　　　width:100px;

　　　　height:100px;

　　　　background:red;

　　　　font-size:14px;

　　}

　　#move:hover{      //鼠標移動到move元素時，就會動態的改變它的三個屬性值background，font-size，left。

　　　　background:green;

　　　　font-size:26px;

　　　　left:700px;

　　　　transition: all 2s ease 0.3s;

　　　　-moz-transition: all 2s ease 0.3s;

　　　　-webkit-transition: all 2s ease 0.3s;

　　　　-o-transition: all 2s ease 0.3s;     

　　}

</style>

著名的Bootstrap的動畫就是基於transition的。另外，當上面的這個動畫（過渡效果）結束後，就會觸發一個transitionEnd的事件。此transitionEnd在不一樣瀏覽器下具備不一樣的寫法，好比：webkitTransitionEnd,oTransitionEnd等。那麼，咱們如何來取得這個可用的事件名呢？

第一種方法：動態建立一個元素與一個樣式表插入DOM樹中，而後改變目標樣式值，從而觸發回調，獲得事件的名字，最後把元素和樣式表從DOM樹中刪除。

(function(){

　　var span = document.createElement("span");   //建立一個元素span

　　span.id = "chaojidan";

　　span.innerHTML = "test";

　　var body = document.body || document.documentElement;

　　var style = document.createElement("style");   //建立一個元素style

　　body.appendChild(span);

　　body.appendChild(style);   //添加到頁面中

　　style.innerHTML = "#chaojidan{color:red;opacity:0;height:1px;overflow:hidden;-moz-transition:color 0.1s;-webkit-transition:color 0.1s;-o-transition:color 0.1s;}";     //設置元素span的樣式，只要改變span的color屬性值，就會觸發過渡動畫。

　　"transitionend otransitionend oTransitionEnd webkitTransitionEnd".replace(/\w+/g,function(type){    //type就是每次正則匹配的值

　　　　span.addEventListener(type,function(e){   //給元素span綁定過渡動畫結束後的觸發的事件，這裏綁定了4個。

　　　　　　window.transitionEnd = e.type;     //瀏覽器支持哪一個名字，就會執行到這裏，而後把事件的類型，賦給window對象的transitionEnd。

　　　　},false);

　　});

　　setTimeout(function(){span.style.color="black";});   //執行span元素的過渡動畫，用時100ms。

　　setTimeout(function(){

　　　　body.removeChild(span);

　　　　body.removeChild(style);

　　},1000);　

})();

第二種方法：從事件的構造器着手，若是把事件構造器的名字直接傳入到createEvent，不拋錯，就證實瀏覽器支持這種事件。

var getTransitionEnd = function(){

　　var obj = {

　　　　"TransitionEvent":"transitionend",

　　　　"WebKitTransitionEvent":"webkitTransitionEnd",

　　　　"OTransitionEvent":"oTransitionEnd",

　　　　"otransitionEvent":"otransitionEnd"

　　};

　　var ret;

　　for(var name in obj){

　　　　try{

　　　　　　var a = document.createEvent(name);

　　　　　　ret = obj[name];

　　　　　　break;

　　　　}catch(){}

　　}

　　getTransitionEnd  = function(){   //重寫此方法，只須要檢測一次，下次直接返回緩存結果，這叫作惰性函數。

　　　　return ret;

　　}

　　return ret;

}

最後，咱們用css transition實現一個動畫效果：

<style>

　　#test{

　　　　width:100px;height:100px;position:absolute;background:red;

　　　　left:0;　　

　　　   transition: left 5s;

　　　　-moz-transition: left 5s;

　　　　-webkit-transition: left 5s;

　　　　-o-transition: left 5s;     

　　}

</style>

<script>

　　var $ = function(id){

　　　　return document.getElementById(id);

　　}

　　var el = $("test");

　　$("run").onclick = function(){    //點擊run按鈕時，觸發過渡動畫效果，此動畫把元素test從0移動到700，用時5s。

　　　　el.style.left = "700px";

　　}

　　$("stop").onclick = function(){  //點擊stop按鈕，將會中止過渡動畫。

　　　　var left = window.getComputedStyle(el,null).left;   //獲得元素test的當前left的值

　　　　el.style.left = left;   //當test元素在運動時，你點擊了stop按鈕的話，test元素會立刻中止。

　　　　["", "-moz-", "-o-", "-webkit-"].forEach(function(prefix){

　　　　　　el.style.removeProperty(prefix +"transition");   //DOM2定義的style方法，低版本IE瀏覽器不支持。這裏只能刪除標籤上的style樣式值

　　　　});

　　}

</script>

上面的例子暴露出transition的弱點了，雖然咱們中止動畫時，能夠經過取當前的left值而後從新賦值的手段實現了，可是隻要transition這個樣式沒有沒清除掉，那麼，咱們後面每一次變更left這個樣式值，都會發生過渡動畫效果。而想移除這個transition樣式，只有當它寫在標籤的style屬性中時，咱們才能很好的刪除。若是它是定義在內部樣式（咱們例子中寫法）或外部樣式，那麼要刪除就比較麻煩了（能夠經過CSSStyleSheet對象刪除）。可是若是外部樣式是跨域獲取的，那麼刪除樣式規則這個手段就失效了，意思就是沒法刪除transition樣式值了。

所以，使用transition實現動畫效果，可控性太差，不適合做爲一個框架的動畫引擎的實現手段。

 

 

 

加油！