css3的transitionEnd事件

发表于

之前项目中遇到一个问题。我们采用css3的transition动画进行页面焦点的显示。transitionEnd事件是在css动画完成过渡后触发，但是监听事件transitionEnd事件存在一个问题，就是使用动画的这个元素，改变了几个属性，对应就会调用几次监听事件。
说一下，我在项目中的解决方法。（此处是举例说明）

上代码：

html中：

1
<div id="change" style="width:100px;height:500px;background:blue;"></div>

js中（想要测试不要忘记引入了jq，此处应用了jq）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//公共方法用来remove掉过多的transitionEnd监听事件
//jqueryObj是要进行动画的对象
//css3Style是该对象要改变的样式
//duration是该动画的过渡时长
//callback是动画结束后的回调函数
function transitionAnimate(jqueryObj,css3Style,duration,callback)
{
   var call = function()
   {
	jqueryObj[0].removeEventListener("webkitTransitionEnd", call);
	callback();  
    }
    if(callback)
    {
	jqueryObj[0].addEventListener("webkitTransitionEnd", call);
    }
    $(jqueryObj).css({"transition":"all "+duration+"ms"});
    $(jqueryObj).css(css3Style);
}
//调用transitionAnimate方法
var t_call = function(){if(callback)callback()};
transitionAnimate($("#change"),{"transform":"scale(2)","border":"5px solid blue","box-shadow":"0px 0px 10px 10px rgba(0,0,0,0.5)"},500,call);