Page 321 - AngularJS权威教程

22.5 交错 CSS 过渡/动画 301

19
使用关键字from等同于把百分比设置为0%，使用关键字to等同于把百分比设置
成100%。
20
我们并不局限于0%和100%：可以分步提供动画，比如10%、15%，等等。要把@keyframe属性
赋值到想要应用动画的类上，我们使用animation关键字，它把动画应用到CSS选择器选定的元 21
素上。

.fade-in:hover {
-webkit-animation: 2s firstAnimation; 22
animation: 2s firstAnimation;
}
23
用ngAnimate，我们把firstAnimation值绑定到任意用.fade-in类选定的元素上。Angular
自动为我们添加和移除.ng-enter类，所以我们可以简单地把事件添加到.fade-in.ng-enter
类上： 24

.fade-in.ng-enter {
-webkit-animation: 2s firstAnimation; 25
animation: 2s firstAnimation;
}
26

22.5 交错 CSS 过渡/动画
27
ngAnimate捆绑了一个额外的特性，用指定的延迟来间隔同时存在的动画。这意味着如果10
个项进入了一个ngRepeat列表，每个项可以在上一个之后延迟X毫秒插入。这样产生的特效就是
一个交错特效，ngAnimate把CSS过渡和动画处理成这样。 28

22.5.1 交错CSS过渡 29

沿用ng-enter和ng-enter-active这样组织CSS过渡代码的格式，可以添加一个额外的CSS
类来提供交错延迟。使用下面的CSS代码，可以用CSS过渡来给我们的.fade-in类添加一个交错 30
特效。
31
.fade-in.ng-enter-stagger {
-webkit-transition-delay:200ms;
transition-delay:200ms;
32
/* 防止意外CSS继承的保护措施 */
-webkit-transition-duration:0;
transition-duration:0; 33
}
下面的代码会在每个后续项以动画方式进入之后，执行200毫秒的停顿。注意，另有一个CSS
34
属性指定了持续时间，并且设置成零了。为什么？它在此是一个安全防护，防止意外的CSS继承
基础CSS类。要是没有这种保障，交错特效可能就会被忽略了。
35
但是这对于我们的.fade-in类意味着什么呢？想象一下我们正在使用一个ngRepeat元素，
这个元素使用的就是.fade-in类。
36
<div ng-repeat="item in items" class="fade-in">