Css 动画的回调

在作项目中常常会遇到使用动画的状况。之前的状况是用js写动画，利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果。虽而后者解决了刷新频率和移动频率同步的问题，可是由于js频繁地操做dom带来的额外开销和复杂的计算公式使得大多数开发者对用原生js动画望而却步而取道各类插件动画。这其实也是html的一块软肋，在网站上作动画，不管就效果仍是性能，JS仍是差了flash不少步。因此当html5和css3的标准出现后，这种状况转变成了多数人从js复杂的动画转向了稍微容易的css动画。css3为咱们提供了很棒的api来实现以前须要费很大的功夫才能实现的功能。只须要很简单的代码，任何人均可以快速地学会css动画。下面是一个动画沿Y轴的上下游走的例子(此处均已webkit内核为默认标准，实际状况须要本身兼容):

transform:

.mydiv {
	width:100px;
	height:100px;
	background:red;
	-webkit-transition: all 2s;
}
.newClass {
	-webkit-transform: translateY(100px)
}
			    

animation:

@-webkit-keyframes mymove {
	from {top:0px;}
	to {top:200px;}
}
.mydiv {
	width:100px;
	height:100px;
	background:red;
	position:relative;
	-webkit-animation:mymove 2s forwards; /* Safari and Chrome */
}

以上是目前css动画常常用到的两种写法。就简洁单的动画来讲通常倾向使用第一种transoform，若是须要在作复杂的转换，可使用第二种animation方法，经过在不一样的运动帧上写下该帧的状态实现。

不少状况下咱们须要知道动画什么时候完成，以及什么完成后须要作什么。也就是说须要一个动画完成的回调函数。在js动画中你不须要担忧找不到回调函数，由于动画自己全依赖于js，回调只不过是一个普通的函数而已。首先，卤煮也是习惯性地用js思惟思考这个问题。既然知道动画的变化时间，那么能够用延时解决回掉的问题。下面是延时的方法

//css中代码能够看到动画持续2s
var delay = 2000;
setTimtout(function(){
    dosomething()
}, delay);

上面的方法是不难理解，延时一个函数执行，延时的时长就是动画变化的时间，这样，看起来当动画完成时会当即执行函数。可是，这种方式存在着不少严重的缺陷。第1、setTimeout函数和css动画不必定是一致的。由于动画开始的时间和setTimeout的时间严格来讲不是一直的，因此会出现要么函数提早执行，要么动画提早结束。第2、js代码和css代码耦合了。delay的时间要随时跟着css内的时间走，若是css代码改变或者js代码改变，两边都必须花时间修复同步（也就是改为为一致时间）这增长了工做量。第3、多个动画会带来更多的代码量和不肯定因素。由于每个定时器针对的是单独的动画元素，因此动画元素一多起来就必须添加更多的代码。第4、没法处理多个动画元素同一时间结束的状况。等。。。。

以上只是部分发现的缺点，对于复杂的动画来讲，延时函数是彻底不能适应。那么有方法处理动画的回调吗？答案固然是确定的。并且很简单，跟以前绑定点击事件是同样的。js提供了css3中两种动画的结束事件。咱们利用它们，能够很容易捕获到动画的完成状况。

transitionEnd

document.getElementById('my').addEventListener('transitionEnd', function(){
	alert('Transform animation has done!');
});

animationend

document.getElementById('my').addEventListener('animationend', function(){
	alert('Animation has done!....');
});

咱们能够看到，它们对于开发者来讲一点也不陌生。不管是用法仍是字面名称，都使得咱们可以一目了然。其实说了啰里吧嗦一大堆，这篇博客主要就是两个事件名称而已。下面是它们的兼容效果。大多数浏览器都支持了这两种事件，基本上支持css3动画的浏览器就会支持这两种事件。

补充一点：animationend只是animation变化事件中的一种。你应该能想到其余的变化状态，没错就是：animationstart,animationiteration. 利用这三种状态时间，咱们能够为所欲为的控制变化中的动画效果。尤为是animationiteration事件，可以让咱们在动画变化过程当中插上一手。