AngularJS动画

　　

angular动画：

$animate服务是基于指令发出的事件来添加指定的样式类，有三种类型
①结构性动画：$animate对元素添加的CSS类是ng-enter,ng-enter-active
②样式类动画：$animate对元素添加的样式是CLASSNAME-add,CLASSNAME-add-
active,CLASSNAME-remove-active
③ngShow和ngHide，.ng-hide-add-active,.ng-hide-remove,ng-hide-remove-
active

angular动画运行方式：
$animate服务默认给动画元素的每个动画事件添加了两个CSS类。
$animate服务支持多个Angular内置的指令，它们无需额外的配置即可支持动画，这些预
先存在的支持动画的指令，都是通过监控指令上的事件实现的。

*原生CSS动画：
设置一个时间事件

setTimeout(function(){
document.getElementsByTagName('body')[0].removeChild
(document.getElementById('myDiv'));
}, 3000);

给目标元素设置CSS
width: 200px;
height: 200px;
background-color: lightgreen;

*过渡动画
CSS过渡是基于样式了的，意思是说。只要我们在HTML上定义了动画的样式，这个动画就
会在浏览器中动起来。为了用样式类实现动画，需要遵循Angular的命名约定来定义CSS过渡。
使用ng-animate，Angular通过给每个动画事件添加两个样式类的方式开始了我们的指令
动画：初始的ng-[event]类，然后ng-[event]-active类。event代表着动画活动的方式

angular指令哪些事件触发动画
·ng-if:事件名称-enter ngif的内容发生改变，新的DOM被插入后触发
事件名称-leave ngif的内容被移除之前触发
·ng-Repeat：事件名称-enter 一项被插入到列表中
事件名称-leave 一项从列表中移除
事件名称-move 列表中的一项移动了
·ng-view：事件名称-enter 新的视图内容准备好了
事件名称-leave 正在离开，已有的内容将被隐藏
·ng-Include:事件名称-enter 新的视图内容准备好了
事件名称-leave 正在离开，已有的内容将被隐藏
·ng-switch：事件名称-enter 新的视图内容准备好了
事件名称-leave 正在离开，已有的内容将被隐藏
·ng-class:事件名称-add ngClass求值为真之后，类被添加之前
事件名称-remove 类被移除前触发
·ng-Show/ng-Hide:事件名称：add ngClass求值为真之后，类被添加之前
事件名称：remove 类被移除前触发

*angularjs交错动画
$animate捆绑了一个额外的特性，用指定的延迟来间隔同时存在的动画，意思就是很多项进入一个ngRepeat列表，每个项可以在上一个之后延迟X毫秒插入，这样就产生一个交错的效果。
所有指令都支持交错动画，但是仅当同一父容器下的两个或更多相同动画事件同时触发时才可以使用，所以ngReapeat上经常使用，并且交错动画也可以在自定义指令中触发。

*ngClass动画
当视图的样式类发生变化时，是可以基于行为去产生动画的，当一个CSS类变更时（比如ng-hide和ng-show，其实ng-hide和ng-show是改变样式类），$animate会通知和触发动画
ngClass不同于结构类动画的约定，依次为[CLASSNAME]-add和[CLASSNAME]-add-active、[CLASSNAME]-remove、[CLASSNAME]-remove-active