angular自定义动画

$animate服务给我们在指令中实现自定义动画提供了帮助。把$animate服务注入到我们自己的应用中之后，可以用暴露出的事件为每个事件触发$animate对象上的关联函数。
大家应该在指令中用动画用的比较多，比较指令的交互是angular最核心的部分。
下面给大家分析一个小例子
我来更新来了，学习了一下angular中的addClass和removeClass动画，这里的addClass和removeClass要和angular中element中的addClass和removeClass区分开。angular中element的中的addClass和removeClass和jquery中的addClass和removeClass是一样的。因为这是用angular内置的jquery包裹的。而$animate服务中的addClass和removeClass是指的是添加类和去除类的动画，实现方式有本质区别。下面把两者的过程给大家列出来。
1、addClass
(1) 运行所有在元素上用JavaScript定义的动画；
(2) [className]-add类被添加到元素上；
(3) $animate检查CSS样式来寻找过渡/动画的持续时间和延迟属性；
(4) [className]-add-active类被添加到元素的classList中（触发CSS动画）；
(5) $animate用定义过的持续时间等待完成；
(6) 动画结束，$animate移除两个添加的类：[className]-add和[className]-add-active；
(7) className类被添加到元素上；
(8) 触发done()回调函数（如果定义了的话）。
2、removeClass
(1) 运行所有在元素上用JavaScript定义的动画；
(2) [className]-remove类被添加到元素上；
(3) $animate检查CSS样式来寻找过渡/动画的持续时间和延迟属性；
(4) [className]-remove-active类被添加到元素的classList中（触发CSS动画）；
(5) $animate用定义过的持续时间等待完成；
(6) 动画结束， $animate 移除三个添加的类： [className] 、[className]-remove 和
[className]-remove-active；
(7) 触发done()回调函数（如果定义了的话）。

为了让大家理解更深入，下面附上一个小例子：

可能大家还是不太理解，我来解释一下，在$animate.removeClass(element,'greenlight')中angular解释过程中会自动为greenlight添加一个-add，称为greenlight-add，添加到类名中。
removeClass也一样，不要理解成类的移除，而是通过添加一个类名来达到removeClass的效果，具体自己试一试拉。
如有错误，欢迎指出啊。