Page 320 - AngularJS权威教程
P. 320

300  第 22 章  Angular 动画


                 }
                 .fade-in.ng-enter.ng-enter-active {
                     opacity: 1;
                 }
                 .fade-in.ng-leave {
                     opacity: 1;
                 }
                 .fade-in.ng-leave.ng-leave-active {
                     opacity: 0;
                 }


             22.4 使用 CSS3 动画

                 CSS3动画比CSS3过渡更广泛、更复杂。除IE9和更早版本的IE之外,所有主流浏览器都支持
             它 们 。使用 CSS3 动画,我 们 会用同 样 的初始 样 式类 ng-[EVENT] ,但是 不需要在
             ng-[EVENT]-active状态中定义动画状态,因为CSS规则会处理剩余部分。

                 我们在@keyframes规则中创建动画。在@keyframes规则中定义的CSS元素内部,我们定义要
             处理的CSS样式。

                 想让DOM元素动起来时,我们使用animation:属性来绑定@keyframe CSS属性,它把动画
             添加到CSS元素上。


                         当在CSS元素上绑定动画时,我们需要同时指定动画的名称和持续时间。




                         记得添加动画持续时间:如果我们忘记添加动画的持续时间,它默认会设成0,
                        此时动画就不会运行了。

                 要创建@keyframes规则,我们需要给关键帧一个名字,并且设置动画的时间阶段,它包含
             了动画过程中的属性。

                 @keyframes firstAnimation {
                     0% {
                         color: yellow;
                     }
                     100% {
                         color: black;
                     }
                 }
                 /*对于Chrome和Safari浏览器 */
                 @-webkit-keyframes firstAnimation {
                     /* from等于0% */
                     from {
                         color: yellow;
                     }
                     /* from等于100% */
                     to {
                         color: black;
                     }
                 }
   315   316   317   318   319   320   321   322   323   324   325