3）检测转换何时结束

我们可以使用JavaScript通过点击“ transitionend ”事件来检测CSS转换何时结束。像设置CSS3属性一样需要注意的是，一些旧版本的Chrome和Safari仍然依赖于事件的前缀版本。为了考虑所有可能的前缀，我们可以使用以下函数 transitionend 在浏览器中返回支持的“ ”事件：

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博客

四个基本的JavaScript函数来驯服CSS3过渡和动画（

3）检测转换何时结束

最新文章