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

cenfeng發表於2019-07-08
JavaScript函式CSSS3動畫

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/，如需轉載，請註明出處，否則將追究法律責任。

相關文章