AngularJS入门之动画

发布时间：2020-12-17 10:34:46 所属栏目：安全来源：网络整理

导读：转自点击打开链接 ———————————————————————— AngularJS中ngAnimate模块支持动画效果，但是ngAnimate模块并未包含在AngularJS核心库中，因此需要使用ngAnimate需要在定义Module时声明对其的引用。 AngularJS中实现动画效果有两大种方

转自点击打开链接

————————————————————————

AngularJS中ngAnimate模块支持动画效果，但是ngAnimate模块并未包含在AngularJS核心库中，因此需要使用ngAnimate需要在定义Module时声明对其的引用。

AngularJS中实现动画效果有两大种方式：

基于CSS的动画效果
- CSS TransitionAnimation
- CSS Class-based Animation
基于Javascript的动画效果

官方给出的能支持动画效果的Directives：

Directive	Supported Animations
ngRepeat	enter,leave and move
ngView	enter and leave
ngInclude	ngSwitch	ngIf	ngClass	add and remove (the CSS class(es) present)
ngShow&ngHide	add and remove (the ng-hide class value)
form&ngModel	add and remove (dirty,pristine,valid,invalid & all other validations)
ngMessages	add and remove (ng-active & ng-inactive)
ngMessage	enter and leave

基于CSS的动画效果:

1. CSS Transition Animation

示例1（官方Demo）：

 1 <!DOCTYPE>
 2 <html 3 head 4     style type="text/css"
 5         /* 开始时的样式 */
 6  .fade.ng-enter {  7  transition: 5s linear all;  当使用css transition实现动画效果时，在开始时的样式中必须包含transition的设置  8 opacity0 9 }10 
11              结束时的样式 12 .ng-enter.ng-enter-active 13 114 15     </style16 
17     script src"/Scripts/angular.js"script18     "/Scripts/angular-animate.js"19     "text/javascript"
20  (function () { 21             var app = angular.module('cssBasedAnimationTest',[ngAnimate]); 22  })(); 23     24 25 body ng-app"cssBasedAnimationTest"26     div ng-if"bool" class"fade"27         Fade me in out
28     div29     button ng-click"bool=true"Fade In!button30     "bool=false"Fade Out!31 body32

注意：使用CSS Transition时，ng-EVENT（动画开始前的样式）和ng-EVENT-active（动画执行完毕后的样式）这两组样式必须同时出现，且在ng-EVENT中必须包含transition的设置。

本篇开头提到过，AngularJS核心库并不包含ngAnimate模块，因此我们首先需要在定义Module时，添加对ngAnimate模块引用的声明：

var app = angular.module('cssBasedAnimationTest',['ngAnimate']);

使用ngIf（ng-if）来控制class="fade"的元素是否加载到DOM：

注意：ngIf和ngShow/ngHide不同，ngIf在元素隐藏时DOM中并没有该元素，而使用ngShow/ngHide时元素依然存在于DOM中。

点击"Fade In!"按钮时，加载div到DOM并触发enter，AngularJS对元素自动添加ng-enter和ng-enter-active的样式，并从ng-enter到ng-enter-active执行样式转换。为了能看清过程，我们将ng-enter中的过渡时间设置为5s，点击"Fade In!"按钮后观察Html的变化。

Step 1（点击前，如前面所说，ngIf在触发前，DOM中并没有div）：

Step 2（点击按钮后，AngularJS自动添加了ng-animate、ng-enter、ng-enter-active这三个动画相关的样式名，并由ngAnimate模块执行动画效果）：

Step 3（动画执行完后，示例中是5s后，ng-animate、ng-enter、ng-enter-active被移除，div的状态为ng-enter-active中指定的状态）：

另外一种CSS transition的方法是使用CSS的Keyframe关键字，对于示例1中样式文件可改为如下：

 1 <style type="text/css">  2      开始时的样式，使用keyframes不需要定义结束时的样式 */
 3  .ng-enter {  4 animation: my_fade_animation 0.5s linear;  5 -webkit-animation: 6 }
 7 
 8  @keyframes my_fade_animation {
 9  from { 10 opacity: 0; 11 }
12 
13 to { 14 1; 15 }
16  } 17 
18  @-webkit-keyframes my_fade_animation {
19 20 21 }
22 
23 24 25 }
26 27 </style>

这种写法中是不需要ng-EVENT-active的。

2. CSS Class-based Animation:

Class-based Animation即为通过ngClass、ngShow、ngHide等Directives执行动画效果。

示例2：


     .ng-hide {    transition3s linear allopacity   }   .ng-show 
    (    cssClassBasedAnimationTest]);   })();  "cssClassBasedAnimationTest"ng-initng-show
  This is ng-show.
 ng-hide
  This is ng-hide.
 "bool=!bool"Toggle

本例改自官方Demo，除了官方Demo中有点问题之外，另外我自己添加了.fade.ng-show以及两个div分别使用ng-show和ng-hide两个属性。为了能看清Html的变化，动画过渡时间也设置成了3s。

图1：

图2：

实际观察Html的变化，无论是ngShow还是ngHide，其实都是在隐藏元素时，默认添加ng-hide-animate、ng-hide-add、ng-hide-add-active样式。也就是针对像ngHide、ngShow等这些可以感知动画的Directives，由AngularJS的ngAnimate模块自动添加了CSS Transition动画。

ngAminate能检测的行为是样式的add或者remove，那如何显式的指定add和remove的样式呢？

示例3（官方Demo）：

 5 .highlight  6  7  8 
 9 .highlight.on-add background white11 .on  yellow15 17 .on-remove 18  black19 20     21 
22     23     24     25 26             27 28     29 30 31     ng-class"{on:onOff}""highlight"        Highlight this box
33     34     "onOff=!onOff"35 36  我们让ng-class随着点击Toggle按钮变化，当onOff=true时样式on会被ngAnimate执行on-add的过程，反之则执行on-remove的过程。由于显式指定了样式，当我们运行示例3时，这个过程就一目了然了。 
 基于Javascript的动画效果: 
 使用基于Javascript的动画效果可以让你在脚本中使用其他的Service甚至引用第三方的脚本进行动画的制作，使动画效果更丰富多变。 
 与基于CSS的动画效果相似，基于Javascript的动画效果也会由AngularJS自动添加一些指定的样式到元素上，但基于Javascript的动画效果还需要使用module.animation()添加动画脚本。 
 示例4： 
 5      6     "/Scripts/jquery-1.9.1.js" 7      8 9             javascriptBasedAnimationTest10 
11  app.animation(.slide12                 return { 13  enter:  (element,doneFn) {14  jQuery(element).fadeIn(100015  },16 
17  move: 18 19 20 
21  leave:  jQuery(element).fadeOut(23  } 24  }]); 26 
 app.controller(myController$scope ($scope) {28  $scope.students  ["Tom"JackAliceMayThomas]; 29 30 31     33 "javascriptBasedAnimationTest"ng-controller"myController""isshow"ng-repeat"stu in students""slide"        {{ stu }}
36     37     input "button"value"Toggle""isshow=!isshow" />38 39  注：本例为了便于实现js的动画效果引入了jQuery。 
 示例4中，我们对class='slide'的元素的AngularJS中的默认行为添加了动画行为，当使用ngIf让元素enter或者remove时，将触发动画效果。 
 关于更复杂的对象，也可参考参考资料中提到的AngularJS Hub的例子，本文就不展开了。
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!