AngularJS入门之动画

女爷i 2022-07-29 09:24 148阅读 0赞

转自[点击打开链接][Link 1]

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

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

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

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

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

<table style="max-width:100%; border-spacing:0px; width:605.455px; margin-bottom:1.5em; border-width:1px 1px 1px 0px; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-top-color:rgb(221,221,221); border-right-color:rgb(221,221,221); border-bottom-color:rgb(221,221,221); font-size:14px; line-height:1.3em; color:rgb(51,51,51); font-family:'Helvetica Neue',Helvetica,Tahoma,Arial,STXihei,'Microsoft YaHei',微软雅黑,sans-serif; background-color:rgb(254,254,254)"> 
 <thead> 
  <tr style="line-height:1.3em"> 
   <th style="padding:8px; line-height:1.5em; vertical-align:bottom; border-top-width:0px; border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221)"> Directive</th> 
   <th style="padding:8px; line-height:1.5em; vertical-align:bottom; border-top-width:0px; border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221)"> Supported Animations</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr style="line-height:1.3em"> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> <a href="https://docs.angularjs.org/api/ng/directive/ngRepeat#animations" style="color:rgb(148,148,148); text-decoration:none; border-bottom-width:1px; border-bottom-style:dashed; border-bottom-color:rgb(148,148,148); font-style:italic; font-weight:bold" rel="nofollow">ngRepeat</a></td> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> enter, leave and move</td> 
  </tr> 
  <tr style="line-height:1.3em"> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> <a href="https://docs.angularjs.org/api/ngRoute/directive/ngView#animations" style="color:rgb(148,148,148); text-decoration:none; border-bottom-width:1px; border-bottom-style:dashed; border-bottom-color:rgb(148,148,148); font-style:italic; font-weight:bold" rel="nofollow">ngView</a></td> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> enter and leave</td> 
  </tr> 
  <tr style="line-height:1.3em"> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> <a href="https://docs.angularjs.org/api/ng/directive/ngInclude#animations" style="color:rgb(148,148,148); text-decoration:none; border-bottom-width:1px; border-bottom-style:dashed; border-bottom-color:rgb(148,148,148); font-style:italic; font-weight:bold" rel="nofollow">ngInclude</a></td> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> enter and leave</td> 
  </tr> 
  <tr style="line-height:1.3em"> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> <a href="https://docs.angularjs.org/api/ng/directive/ngSwitch#animations" style="color:rgb(148,148,148); text-decoration:none; border-bottom-width:1px; border-bottom-style:dashed; border-bottom-color:rgb(148,148,148); font-style:italic; font-weight:bold" rel="nofollow">ngSwitch</a></td> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> enter and leave</td> 
  </tr> 
  <tr style="line-height:1.3em"> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> <a href="https://docs.angularjs.org/api/ng/directive/ngIf#animations" style="color:rgb(148,148,148); text-decoration:none; border-bottom-width:1px; border-bottom-style:dashed; border-bottom-color:rgb(148,148,148); font-style:italic; font-weight:bold" rel="nofollow">ngIf</a></td> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> enter and leave</td> 
  </tr> 
  <tr style="line-height:1.3em"> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> <a href="https://docs.angularjs.org/api/ng/directive/ngClass#animations" style="color:rgb(148,148,148); text-decoration:none; border-bottom-width:1px; border-bottom-style:dashed; border-bottom-color:rgb(148,148,148); font-style:italic; font-weight:bold" rel="nofollow">ngClass</a></td> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> add and remove (the CSS class(es) present)</td> 
  </tr> 
  <tr style="line-height:1.3em"> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> <a href="https://docs.angularjs.org/api/ng/directive/ngShow#animations" style="color:rgb(148,148,148); text-decoration:none; border-bottom-width:1px; border-bottom-style:dashed; border-bottom-color:rgb(148,148,148); font-style:italic; font-weight:bold" rel="nofollow">ngShow</a>&nbsp;&amp;&nbsp;&nbsp;<a href="https://docs.angularjs.org/api/ng/directive/ngHide#animations" style="color:rgb(148,148,148); text-decoration:none; border-bottom-width:1px; border-bottom-style:dashed; border-bottom-color:rgb(148,148,148); font-style:italic; font-weight:bold" rel="nofollow">ngHide</a></td> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> add and remove (the ng-hide class value)</td> 
  </tr> 
  <tr style="line-height:1.3em"> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> <a href="https://docs.angularjs.org/api/ng/directive/form#animation-hooks" style="color:rgb(148,148,148); text-decoration:none; border-bottom-width:1px; border-bottom-style:dashed; border-bottom-color:rgb(148,148,148); font-style:italic; font-weight:bold" rel="nofollow">form</a>&nbsp;&amp;&nbsp;&nbsp;<a href="https://docs.angularjs.org/api/ng/directive/ngModel#animation-hooks" style="color:rgb(148,148,148); text-decoration:none; border-bottom-width:1px; border-bottom-style:dashed; border-bottom-color:rgb(148,148,148); font-style:italic; font-weight:bold" rel="nofollow">ngModel</a></td> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> add and remove (dirty, pristine, valid, invalid &amp; all other validations)</td> 
  </tr> 
  <tr style="line-height:1.3em"> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> <a href="https://docs.angularjs.org/api/ngMessages#animations" style="color:rgb(148,148,148); text-decoration:none; border-bottom-width:1px; border-bottom-style:dashed; border-bottom-color:rgb(148,148,148); font-style:italic; font-weight:bold" rel="nofollow">ngMessages</a></td> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> add and remove (ng-active &amp; ng-inactive)</td> 
  </tr> 
  <tr style="line-height:1.3em"> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> <a href="https://docs.angularjs.org/api/ngMessages#animations" style="color:rgb(148,148,148); text-decoration:none; border-bottom-width:1px; border-bottom-style:dashed; border-bottom-color:rgb(148,148,148); font-style:italic; font-weight:bold" rel="nofollow">ngMessage</a></td> 
   <td style="padding:8px; line-height:1.3em; vertical-align:top; border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); font-size:14px"> enter and leave</td> 
  </tr> 
 </tbody> 
</table>

## 基于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 opacity: 0; 9 }
    10 
    11             /* 结束时的样式 */
    12 .fade.ng-enter.ng-enter-active { 13 opacity: 1; 14 }
    15     </style>
    16 
    17     <script src="/Scripts/angular.js"></script>
    18     <script src="/Scripts/angular-animate.js"></script>
    19     <script type="text/javascript">
    20 (function () { 21             var app = angular.module('cssBasedAnimationTest', ['ngAnimate']); 22 })(); 23     </script>
    24 </head>
    25 <body ng-app="cssBasedAnimationTest">
    26     <div ng-if="bool" class="fade">
    27         Fade me in out
    28     </div>
    29     <button ng-click="bool=true">Fade In!</button>
    30     <button ng-click="bool=false">Fade Out!</button>
    31 </body>
    32 </html>

注意：使用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）： ####

![252246328655494.png][]

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

![252246521931566.png][]![3Y7NBv.png_web][]

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

![252247035377030.png][]![QjyUnm.png_web][]

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

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

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

## 2. CSS Class-based Animation: ##

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

示例2：

<!DOCTYPE>
    <html>
    <head>
      <style type="text/css"> .fade.ng-hide { transition: 3s linear all; opacity: 0; } .fade.ng-show { transition: 3s linear all; opacity: 1; }
     </style>
      <script src="/Scripts/angular.js"></script>
      <script src="/Scripts/angular-animate.js"></script>
      <script type="text/javascript"> (function () { var app = angular.module('cssClassBasedAnimationTest', ['ngAnimate']); })(); </script>
    </head>
    <body ng-app="cssClassBasedAnimationTest" ng-init="bool=true">
      <div ng-show="bool" class="fade">
     This is ng-show.
     </div>
      <div ng-hide="bool" class="fade">
     This is ng-hide.
     </div>
      <button ng-click="bool=!bool">Toggle</button>
    </body>
    </html>

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

#### 图1：![262307377189935.png][] ####

![rimUnmZ.png_web][]

#### 图2：![262307487647844.png][] ####

![mqIRJ3.png_web][]

实际观察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）：

1 <!DOCTYPE>
     2 <html>
     3 <head>
     4     <style type="text/css">
     5 .highlight { 6 transition: 3s linear all; 7 }
     8 
     9 .highlight.on-add { 10 background: white; 11 }
    12 
    13 .highlight.on { 14 background: yellow; 15 }
    16 
    17 .highlight.on-remove { 18 background: black; 19 }
    20     </style>
    21 
    22     <script src="/Scripts/angular.js"></script>
    23     <script src="/Scripts/angular-animate.js"></script>
    24     <script type="text/javascript">
    25 (function () { 26             var app = angular.module('cssClassBasedAnimationTest', ['ngAnimate']); 27 })(); 28     </script>
    29 </head>
    30 <body ng-app="cssClassBasedAnimationTest" ng-init="bool=true">
    31     <div ng-class="{on:onOff}" class="highlight">
    32         Highlight this box
    33     </div>
    34     <button ng-click="onOff=!onOff">Toggle</button>
    35 </body>
    36 </html>

我们让ng-class随着点击Toggle按钮变化，当onOff=true时样式on会被ngAnimate执行on-add的过程，反之则执行on-remove的过程。由于显式指定了样式，当我们运行示例3时，这个过程就一目了然了。

## 基于Javascript的动画效果: ##

使用基于Javascript的动画效果可以让你在脚本中使用其他的Service甚至引用第三方的脚本进行动画的制作，使动画效果更丰富多变。

与基于CSS的动画效果相似，基于Javascript的动画效果也会由AngularJS自动添加一些指定的样式到元素上，但基于Javascript的动画效果还需要使用 module .animation ()添加动画脚本。

示例4：

1 <!DOCTYPE>
     2 <html>
     3 <head>
     4     <script src="/Scripts/angular.js"></script>
     5     <script src="/Scripts/angular-animate.js"></script>
     6     <script src="/Scripts/jquery-1.9.1.js"></script>
     7     <script type="text/javascript">
     8 (function () { 9             var app = angular.module('javascriptBasedAnimationTest', ['ngAnimate']); 10 
    11 app.animation('.slide', [function () { 12                 return { 13 enter: function (element, doneFn) { 14 jQuery(element).fadeIn(1000, doneFn); 15 }, 16 
    17 move: function (element, doneFn) { 18 jQuery(element).fadeIn(1000, doneFn); 19 }, 20 
    21 leave: function (element, doneFn) { 22 jQuery(element).fadeOut(1000, doneFn); 23 } 24 } 25 }]); 26 
    27 app.controller('myController', ['$scope', function ($scope) { 28 $scope.students = ["Tom","Jack","Alice","May","Thomas"]; 29 }]); 30 })(); 31     </script>
    32 </head>
    33 <body ng-app="javascriptBasedAnimationTest" ng-controller="myController">
    34     <div ng-if="isshow" ng-repeat="stu in students" class="slide">
    35         {
       { stu }}
    36     </div>
    37     <input type="button" value="Toggle" ng-click="isshow=!isshow" />
    38 </body>
    39 </html>

注：本例为了便于实现js的动画效果引入了jQuery。

示例4中，我们对class='slide'的元素的AngularJS中的默认行为添加了动画行为，当使用ngIf让元素enter或者remove时，将触发动画效果。

关于更复杂的对象，也可参考参考资料中提到的AngularJS Hub的例子，本文就不展开了。

[Link 1]: http://www.cnblogs.com/wushangjue/p/4529063.html?utm_source=tuicool&utm_medium=referral
[252246328655494.png]: /images/20220728/9caa2fe43680451fb20b6cfb3019f14f.png
[eqeemq.png_web]: http://img2.tuicool.com/eqeemq.png!web
[252246521931566.png]: http://images0.cnblogs.com/blog2015/455688/201505/252246521931566.png
[3Y7NBv.png_web]: http://img0.tuicool.com/3Y7NBv.png!web
[252247035377030.png]: http://images0.cnblogs.com/blog2015/455688/201505/252247035377030.png
[QjyUnm.png_web]: http://img2.tuicool.com/QjyUnm.png!web
[262307377189935.png]: /images/20220728/d5292a01ce5d4de2bca9d1f9bbebbdd6.png
[rimUnmZ.png_web]: http://img1.tuicool.com/rimUnmZ.png!web
[262307487647844.png]: /images/20220728/e87e3fe7f82f4aff999925e43ba7e849.png
[mqIRJ3.png_web]: http://img0.tuicool.com/mqIRJ3.png!web