transitionend

所有添加了CSS3动画的元素都会有一个Transitionend事件，顾名思义，也就是当前元素的CSS3动画完成的时候执行一些操作。

下面来看一个例子，一个元素，当鼠标移过它的时候，我们让它在1秒内使用CSS3从宽度100PX变到200PX，动画执行完成后，弹出一句话：

<div id="ani">
		
</div>
	window.onload = function(){
		var ani = document.getElementById("ani");
		ani.addEventListener("mouseover",function(){
			this.style.width = "200px";
		},false);

		ani.addEventListener("transitionend",function(){
			alert("done!");
		},false);
	};

在Chrome下，鼠标移动到上面后，元素的宽度会变化到200PX，当动画结束后，会弹出一个“done!”：

01

点击Demo进行查看效果。

transitionend的一些问题

我们可以同时改变元素的多个属性，让它一起参加动画(把上面的动画增加一个高度和背景色，结束后仍然弹出”done!”)：

		ani.addEventListener("mouseover",function(){
			this.style.width = "200px";
			this.style.height = "200px";
			this.style.backgroundColor = "skyblue";
		},false);

可是这样出现了一个大问题，什么问题呢？请点击Demo。

没错，在动画结束后，会弹出三遍“done!”，因为它同时进行了三个属性的动画，也就是说回调函数也会执行三遍！

解决回调问题

transitionend会根据属性的多少来执行多次，对此，我没有办法继续使用它，所以我使用了定时器：

var ani = document.getElementById("ani"),
	timer = null;
ani.addEventListener("mouseover",function(){
	this.style.width = "200px";
	this.style.height = "200px";
	this.style.backgroundColor = "skyblue";
	clearTimeout(timer);
	timer = setTimeout(function(){
		alert("done!");
	},1000);
},false);

ani.addEventListener("mouseout",function(){
	this.style.width = "100px";
	this.style.height = "100px";
	this.style.backgroundColor = "transparent";
	clearTimeout(timer);
},false);

现在当鼠标经过并动画完成后，只会弹出一次”done!”，查看 Demo。

结语

文中所述代替transitionend执行回调函数的方法，可能不是最好的，如果您有更好的解决方案，可以分享一下，谢谢！