四個基本的JavaScript函式來馴服CSS3過渡和動畫(

cenfeng發表於2019-07-08

3)檢測轉換何時結束

我們可以使用JavaScript通過點選“  transitionend ”事件 來檢測CSS轉換何時結束 像設定CSS3屬性一樣需要注意的是,一些舊版本的Chrome和Safari仍然依賴於事件的字首版本。 為了考慮所有可能的字首,我們可以使用以下函式 transitionend 在瀏覽器中 返回支援的“  ”事件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function gettransitionend(){<font></font>
     var root = document.documentElement<font></font>
     var transitions = {<font></font>
         'transition' : 'transitionend' ,<font></font>
         'OTransition' : 'oTransitionEnd' ,<font></font>
         'MozTransition' : 'transitionend' ,<font></font>
         'WebkitTransition' : 'webkitTransitionEnd' <font></font>
         }<font></font>
     <font></font>
     for ( var t in transitions){<font></font>
         if (root.style[t] !== undefined ){<font></font>
             return transitions[t];<font></font>
         }<font></font>
     }<font></font>
     return undefined<font></font>
}<font></font>
<font></font>
//Example Usage:<font></font>
var transitionendevt = gettransitionend()<font></font>
if (transitionendevt){ // if transitionend event supported by browser<font></font>
     element.addEventListener(transitionendevt, function (e){<font></font>
         // do something after end of transition<font></font>
     }, false )<font></font>
}

在這種情況下  ,  事件物件 填充了一些屬性,其中兩個更有用 event.propertyName ,它返回一個字串,其中包含已轉換的CSS3屬性名稱列表,並 event.elapsedTime 返回轉換的持續時間(以秒為單位)。


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69933200/viewspace-2649851/,如需轉載,請註明出處,否則將追究法律責任。

相關文章