Page 319 - AngularJS权威教程

22.3 使用 CSS3 过渡 299

不支持CSS3过渡的浏览器会优雅地降级到应用的无动画版本。 19
要做任何CSS动画，我们都要确认给动画中关注的DOM元素添加了样式。

例如，在下面的示例中，我们看看如何让这个元素动起来： 20

<div class="fade-in"></div>
21
CSS3过渡是完全基于样式类的，意思是说，只要我们在HTML上定义了动画的样式，这个动
画就会在浏览器中动起来。
22
为了用样式类实现动画，需要遵循Angular的命名约定来定义CSS过渡。

CSS过渡是让元素从一种样式渐变为另一种样式的特效。要定义一个动画，我们需要指定想 23
要添加动画的属性，以及特效的持续时间。
例如，这段代码使用.fade-in类在DOM元素的所有属性上添加了一个持续两秒的过渡特效。
24
.fade-in {
transition: 2s linear all;
-webkit-transition: 2s linear all; 25
}
设置了这个过渡和时间之后，就可以在DOM元素的不同状态上定义属性了。 26

.fade-in:hover {
width: 300px;
height: 300px; 27
}
使用ngAnimate，Angular通过给每个动画事件添加两个样式类的方式开始了我们的指令动 28
画：初始的ng-[EVENT]类，不久之后是ng-[EVENT]-active类。
为了自动让上面的DOM元素使用过渡实现Angular动画，我们修改上面初始的.fade-in示例 29
来包含初始状态类：

.fade-in.ng-enter { 30
opacity: 0;
}
.fade-in.ng-enter.ng-enter-active { 31
opacity: 1;
}
32
要真正运行这个动画，需要包含CSS动画定义。在这个定义中，我们需要同时
包含持续时间和将要修改的元素属性。
33
.fade-in.ng-enter { transition: 2s linear all; -webkit-transition: 2s linear all; }
也可以把transition属性放到基准CSS类中（“.fade-in”，而不是在每个要产生动画的地方
都指定）。 34

.fade-in {
-webkit-transition: 2s linear all; 35
transition: 2s linear all;
}
.fade-in.ng-enter { 36
opacity: 0;