Page 337 - AngularJS权威教程

22.9 内置指令的动画 317

1. CSS3过渡 19
要让ngHide中的元素动起来，我们需要确认添加了展现元素初始状态的CSS样式类，以及为
enter和edit状态定义最终状态的类： 20

.animateMe.ng-hide-add,
.animateMe.ng-hide-remove {
transition: 2s linear all; 21
-webkit-transition: 2s linear all;
display: block !important;
} 22
注意CSS块中的最后一行：它告诉CSS渲染这个类，并且，对于display属性而言，没有其
他备选值。没有这行的话，这个元素就不会显示了。 23

至此，可以简单地在动画中定义初始和最终阶段的CSS属性。
24
.animateMe.ng-hide-add {
opacity: 1;
}
.animateMe.ng-hide-add.ng-hide-add-active 25
{
opacity: 0;
} 26
.animateMe.ng-hide-remove {
opacity: 0;
}
.animateMe.ng-hide-remove.ng-hide-remove-active { 27
opacity: 1;
}
28
2. CSS3动画
首先，添加为动画定义的@keyframe。
29
@keyframes animateMe-add {
from {opacity: 1;}
to {opacity: 0;} 30
}
@-webkit-keyframes animateMe-add {
from {opacity: 1;}
to {opacity: 0;} 31
}
@keyframes animateMe-remove {
from {opacity:0;} 32
to {opacity:1;}
}
@-webkit-keyframes animateMe-remove { 33
from {opacity:0;}
to {opacity:1;}
}
34
为了应用动画，需要做的就是在我们的类中添加动画CSS样式：

.animateMe.ng-hide-add { 35
-webkit-animation: 2s animateMe-add;
animation: 2s animateMe-add;
}
.animateMe.ng-hide-remove { 36