Page 325 - AngularJS权威教程

22.9 内置指令的动画 305

}, 2000); 19
}, 1000);
});

在这些例子中，我们有一个roommates列表，包含了四个元素。在一秒钟之后，加了第五个。 20
两秒之后，移除了第一个元素。

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

首先，在初始类上定义动画属性：
23
.fade-in.ng-enter,
.fade-in.ng-leave {
transition: 2s linear all;
-webkit-transition: 2s linear all; 24
}

至此，可以简单地在动画中定义初始和最终阶段的CSS属性。这里，我们把元素从绿色的文 25
字淡入，在进入动画的最终阶段把文字变成黑色。在离开（元素移除）动画中，我们把属性反转：

.fade-in.ng-enter { 26
opacity: 0;
color: green;
}
.fade-in.ng-enter.ng-enter-active { 27
opacity: 1;
color: black;
} 28
.fade-in.ng-leave {}
.fade-in.ng-leave.ng-leave-active {
opacity: 0;
} 29
2. CSS3关键帧动画
30
使用关键帧动画时，无需定义开始和结束的样式类，而是仅定义单个选择器，包含动画样式
的键。
31
首先为关键帧定义动画属性：

@keyframes animateView-enter {
from {opacity:0;} 32
to {opacity:1;}
}
@-webkit-keyframes animateView-enter { 33
from {opacity:0;}
to {opacity:1;}
} 34
@keyframes animateView-leave {
from {opacity: 1;}
to {opacity: 0;}
} 35
@-webkit-keyframes animateView-leave {
from {opacity: 1;}
to {opacity: 0;} 36
}