关于transitionend (二)

再看transitionend事件

在去年，我写过《关于transitionend》一篇文章，说的是如何解决该事件在元素执行多个属性变化时的回调次数问题。今天又用到transitionend事件，于是又想到了一种比较简单的解决方法。

删除transitionend事件

首先，再来看一下问题所在：Demo。

上面的例子中，当鼠标经过一个设置了CSS3动画的DIV添加了transitionend事件，这个元素在进行变化的时候同时改变了3个属性，即：width、height、backgrounColor。所以，回调函数执行了3遍，在以前我用的是定时器处理这个问题的，那是因为我把删除事件忘记了…

有一点需要事件知道的就是：每个属性的transitionend回调函数是依次执行的！例如，刚才对一个DIV的三个属性进行了设置，那么backgrounColor、height、width三个属性transitionend的回调函数将依次执行，何以证明呢？其实在transitionend事件对象里有一个叫prooertyName的属性，我们弹出一下就知道了：Demo。

上面Demo中依次弹出的是：

那么，我们在第一次执行回调完成之后，把transitionend事件删掉，这个问题就可以轻松解决了。

例如，元素transitionend时添加一个end回调函数，该回调函数执行完成后，立即把transitionend事件删掉：

addEnd(div,end);
function end()
{
	alert("done");
	delEnd(this,end);
}

function addEnd(obj,fn)
{
	obj.addEventListener("webkitTransitionEnd",fn,false);
	obj.addEventListener("transitionend",fn,false);
}

function delEnd(obj,fn)
{
	obj.removeEventListener("webkitTransitionEnd",fn,false);
	obj.removeEventListener("transitionend",fn,false);
}

最后，Demo证明一切!!