Page 322 - AngularJS权威教程

302 第 22 章 Angular 动画

Item: #1 -- {{ item }}
</div>
每次一系列的项插入到列表中之后，交错延迟会逐步启动。Item #1会被正常插入，#1会在200
毫秒之后，#3 400毫秒之后，以此类推。

22.5.2 交错CSS动画

CSS动画也支持并且遵循与上面提到的CSS过渡交错特效同样的CSS命名约定。唯一的不同
是没有使用transition-delay，而是用了animation-delay（原因很明显）。如果用CSS动画来
实现交错特效，.fade-in类看上去就会像这样：

.fade-in.ng-enter-stagger {
-webkit-animation-delay:200ms;
animation-delay:200ms;

/* css交错动画需要放在这里 */
-webkit-animation-duration:0;
animation-duration:0;
}
既然CSS关键帧要等到重排（当浏览器重绘屏幕）时才会发生，可能会出现轻微的闪烁，或者
元素自身可能短暂地不动，直到交错动画开始生效。这是因为关键帧动画尚未触发，所以from或者
0%的动画还没有开始。为解决这个问题，在赋值了关键帧动画的CSS类中，可以放额外的CSS样式。

.fade-in.ng-enter {
/* 重排之前的样式 */
opacity:0;

-webkit-animation: 2s firstAnimation;
animation: 2s firstAnimation;
}

.fade-in.ng-enter-stagger { ... }

@keyframes firstAnimation { ... }
@-webkit-keyframes firstAnimation { ... }

22.5.3 什么指令支持交错动画

很简单，所有指令都可以，但是仅当同一父容器下的两个或更多相同动画事件同时触发时，
才可以使用。所以当10个项被插入一个nRepeat列表时，交互特效就产生。这意味着如果ngClass
被放在一个ngRepeat元素上，ngClass的值在列表中对每个项都产生了变化，样式类变化的动画
就会渲染出一个交错特效。
交错动画也可以在自定义指令中触发。在一行中用$animate服务调几次，一个交互动画就呈
现出来了。确保每个动画的父元素是同一个，并且每个参与动画元素的className值也是相同的。

22.6 使用 JavaScript 动画

JavaScrip动画不同于前两种Angular动画方法，因为我们直接使用JavaScript设置DOM元素的
属性。