Css3 過渡（Transition）特效回呼函數

標籤：jquery   sdn   blank   簡單   end   iss   splay   firefox   代碼   

Css3 出來之後，能夠說是替代了Flash，通過使用Html5和Css3的完美結合。就能夠做出不論什麼你想得到的特效，這裡不再闡述。。。

近期在做一個喝水簽到的功能。在想簽到成功之後，簽到框能夠類比被水充滿的效果。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >

這是一個簡單的顏色過渡，幾行代碼就完畢了我想要的效果，

   #waterDiv{width:100px;height:100px;display: block;margin-top: 200px;background:gray;transition:background-color 2s;-moz-transition:background-color 2s; /* Firefox 4 */-webkit-transition:background-color 2s; /* Safari and Chrome */-o-transition:background-color 2s; /* Opera */border-radius:50px;}

上面的代碼是剛開始的灰色圓，注意“transition”（w3c講的比我具體。點擊表格進入w3c學校）

給某個標籤加上要過渡的標誌，我想讓waterDiv顏色在點擊的時候由灰變藍，就能夠這樣寫（這裡使用的是javascript原生代碼，方便後面的事件監聽）

       function checkIn(){var yuan = document.querySelector('#waterDiv');                yuan.style.backgroundColor = "#87CEFF";}<div id='waterDiv' onclick="checkIn()"></div>

好了。問題來了。我想讓在圓顏色過渡之後進行一個提示，比方“簽到成功”。一般的jquery會為我們提供一個CallBack函數。可是這樣的css怎麼知道過渡完畢了呢？

這裡就須要使用js來監聽過渡結束事件

                yuan.addEventListener('webkitTransitionEnd', function () {alert('its ok');// callback here}, false);  yuan.addEventListener('transitionend', function () {//alert('its ok');// callback here}, false);

預設的事件是”transitionend“其它瀏覽器的核心也會有影響，客觀能夠嘗試一下

終於就是

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" >

Css3 過渡（Transition）特效回呼函數