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);

上面的方法是不难理解，延时一个函数执行，延时的时长就是动画变化的时间，这样，看起来当动画完成时会立即执行函数。但是，这种方式存在着很多严重的缺陷。第一、setTimeout函数和css动画不一定是一致的。因为动画开始的时间和setTimeout的时间严格来说不是一直的，所以会出现要么函数提前执行，要么动画提前结束。第二、js代码和css代码耦合了。delay的时间要随时跟着css内的时间走，如果css代码改变或者js代码改变，两边都必须花时间修复同步（也就是改成为一致时间）这增加了工作量。第三、多个动画会带来更多的代码量和不确定因素。因为每一个定时器针对的是单独的动画元素，所以动画元素一多起来就必须添加更多的代码。第四、无法处理多个动画元素同一时间结束的情况。等。。。。

以上只是部分发现的缺点，对于复杂的动画来说，延时函数是完全不能适应。那么有方法处理动画的回调吗？答案当然是肯定的。而且很简单，跟之前绑定点击事件是一样的。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事件，能够让我们在动画变化过程中插上一手。