Page 335 - AngularJS权威教程

22.9 内置指令的动画 315

class="animateMe"> 19
<h2>Grow me</h2>
</div>
</div>
20
1. CSS3过渡
要让ngClass中的元素动起来，我们需要确认添加了展现元素初始状态的CSS样式类，以及 21
为enter和edit状态定义最终状态的类：

.animateMe.grown-add, 22
.animateMe.grown-remove {
transition: 2s linear all;
-webkit-transition: 2s linear all;
} 23
至此，可以简单地在动画中定义初始和最终阶段的CSS属性。
24
.grown {font-size: 50px;}
.animateMe.grown-add {
font-size: 16px;
} 25
.animateMe.grown-add.grown-add-active {
font-size: 50px;
} 26
.animateMe.grown-remove {}
.animateMe.grown-remove.grown-remove-active {
font-size: 16px;
} 27

2. CSS3动画
28
首先，添加为动画定义的@keyframe。

@keyframes animateMe-add { 29
from {font-size: 16px;}
to {font-size: 50px;}
}
@-webkit-keyframes animateMe-add { 30
from {font-size: 16px;}
to {font-size: 50px;}
}
@keyframes animateMe-remove { 31
to {font-size: 50px;}
from {font-size: 16px;}
} 32
@-webkit-keyframes animateMe-remove {
to {font-size: 50px;}
from {font-size: 16px;}
} 33
为了应用动画，需要做的就是在我们的类中添加动画CSS样式：
34
.animateMe.grown-add {
-webkit-animation: 2s animateMe-add;
animation: 2s animateMe-add;
} 35
.animateMe.grown-remove {
-webkit-animation: 2s animateMe-remove;
animation: 2s animateMe-remove; 36
}