AngularJS–Animations(动画)

点击查看AngularJS系列目录
转载请注明出处：http://www.cnblogs.com/leosx/

---

 

在AngularJS 1.3 中，给一些指令(eg:   ngRepeat,ngSwitch, ngView等)提供了一个动画的钩子，也就是说，这些指令可以使用 $animate 动画服务(是一个服务哦，可以注入到controller里面去)。 这些动画钩子可以再整个指令的生命周期中随着各种指示，触发等进行动作，显示动画效果，我们可以使用HTML5的各种动画效果，类似 Transition，Keyframe，或者回调函数(这取决于是否给指令配置了动画)。如果在一个factory工厂方法中，使用AngularJS或者Javascript代码定义，设置了规范的命名空间了的时候，就可以使用动画了（这句话感觉翻译的有问题，忘指点迷津…）。

如果你的应用程序没有依赖于 ngAnimate 模块的话，你的所有动画都是没有用的。

下面我们来看一下一个使用 ngShow 和 ngHide 进行显示隐藏的动画：

<style>
.sample-show-hide {
  padding:10px;
  border:1px solid black;
  background:white;
}

.sample-show-hide {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
}

.sample-show-hide.ng-hide {
  opacity:0;
}
</style>
<div ng-app>
  <div ng-init="checked=true">
    <label>
      <input type="checkbox" ng-model="checked" style="float:left; margin-right:10px;"> Is Visible...
    </label>
    <div class="check-element sample-show-hide" ng-show="checked" style="clear:both;">
      Visible...
    </div>
  </div>
</div>

效果图：

 

 

安装动画模块

可以查看动画模块来查看如何安装。

 

 

它们是怎么样工作的

在AngularJS中的动画，完全是基于css 样式类的。所以你首先得有这样动画class。我们还是来看看例子吧！

<div ng-repeat="item in items" class="repeated-item">
{{ item.id }}
</div>

我们看看 ngRepeat，它会重复 items里面的每一个元素，生成一个这个模板的副本，对于每一个副本元素的增加，Angualr都会在该元素上增加一个名为ng-enter 的 class 样式，当这个元素被删除的时候，会增加一个 ng-leave的 class样式，当你移动这个元素的时候，它就会增加一个ng-move的 class 类样式。

我们来看看下面的css代码，我们可以看到它使用了CSS3的一些过度，关键帧，变幻等动画效果。而且它们的触发时间呢，比较需要注意，可以看到，它们的触发时间是当你使用了 ngRepeat之后，会出现上面一段我们说到的那几个样式来进行触发的。代码如下：

/*
 We're using CSS transitions for when
 the enter and move events are triggered
 for the element that has the .repeated-item
 class
*/
.repeated-item.ng-enter, .repeated-item.ng-move {
 -webkit-transition:0.5s linear all;
 -moz-transition:0.5s linear all;
 -o-transition:0.5s linear all;
 transition:0.5s linear all;
 opacity:0;
}

/*
The ng-enter-active and ng-move-active
are where the transition destination properties
are set so that the animation knows what to
animate.
*/
.repeated-item.ng-enter.ng-enter-active,
.repeated-item.ng-move.ng-move-active {
 opacity:1;
}

/*
 We're using CSS keyframe animations for when
 the leave event is triggered for the element
 that has the .repeated-item class
*/
.repeated-item.ng-leave {
 -webkit-animation:0.5s my_animation;
 -moz-animation:0.5s my_animation;
 -o-animation:0.5s my_animation;
 animation:0.5s my_animation;
}

@keyframes my_animation {
 from { opacity:1; }
 to { opacity:0; }
}

/*
 Unfortunately each browser vendor requires
 its own definition of keyframe animation code...
*/
@-webkit-keyframes my_animation {
 from { opacity:1; }
 to { opacity:0; }
}

@-moz-keyframes my_animation {
 from { opacity:1; }
 to { opacity:0; }
}

@-o-keyframes my_animation {
 from { opacity:1; }
 to { opacity:0; }
}

当然，如果你要兼容IE什么的，你也可以使用JQuery去实现这些动画效果，对吧，看看下面代码：

myModule.animation('.repeated-item', function() {
return {
  enter : function(element, done) {
    element.css('opacity',0);
    jQuery(element).animate({
      opacity: 1
    }, done);

    // optional onDone or onCancel callback
    // function to handle any post-animation
    // cleanup operations
    return function(isCancelled) {
      if(isCancelled) {
        jQuery(element).stop();
      }
    }
  },
  leave : function(element, done) {
    element.css('opacity', 1);
    jQuery(element).animate({
      opacity: 0
    }, done);

    // optional onDone or onCancel callback
    // function to handle any post-animation
    // cleanup operations
    return function(isCancelled) {
      if(isCancelled) {
        jQuery(element).stop();
      }
    }
  },
  move : function(element, done) {
    element.css('opacity', 0);
    jQuery(element).animate({
      opacity: 1
    }, done);

    // optional onDone or onCancel callback
    // function to handle any post-animation
    // cleanup operations
    return function(isCancelled) {
      if(isCancelled) {
        jQuery(element).stop();
      }
    }
  },

  // you can also capture these animation events
  addClass : function(element, className, done) {},
  removeClass : function(element, className, done) {}
}
});

当这些CSS样式或者Javascript代码被添加到了元素上以后，AngularJS会自动的在对应的触发器中执行力的CSS样式，或者JavaScript代码的。 如果既有CSS，也有JavaScript代码，并且CSS样式名已经在元素上能匹配到了了，那么AngularJS会让两个动画同时执行的。

 

 

Class 类样式和 ngClass 动画钩子

AngularJS也有自己的动画钩子，这样的话，我们就可以根据元素的触发器，去添加或者移除动画钩子，也就是相当于如果CSS样式类存在的话，就会把这些动画样式应用于这个元素上。但是有个前提，那就是这个元素是在AngularJS应用程序中的，也就是受AngularJS控制的才行！ 不然依然是不会有动画效果的。

我们还是来一个例子来看看效果吧！

<style>
.css-class-add, .css-class-remove {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.css-class,
.css-class-add.css-class-add-active {
  color: red;
  font-size:3em;
}

.css-class-remove.css-class-remove-active {
  font-size:1.0em;
  color:black;
}
</style>
<p>
  <input type="button" value="set" ng-click="myCssVar='css-class'">
  <input type="button" value="clear" ng-click="myCssVar=''">
  <br>
  <span ng-class="myCssVar">CSS-Animated Text</span>
</p>

点击set按钮效果：

点击Clear按钮的效果如下：

 

哪些指令支持动画呢？

有少数常见的AngularJS指令是支持和触发动画钩子的。下表详细解释这些动画：

指令	支持的动画
ngRepeat	enter, leave, and move
ngView	enter and leave
ngInclude	enter and leave
ngSwitch	enter and leave
ngIf	enter and leave
ngClass or	add and remove
ngShow & ngHide	add and remove (the ng-hide class value)

 

对于每个指令指令的动画的详细介绍的话，请参考API文档.

 

我们怎么在我们自定义的指令中使用动画呢？其实比较简单，你只需要在你创建指令的工厂中，注入 $animate 到工厂中，然后你在你的指令中，就可以使用了。

myModule.directive('my-directive', ['$animate', function($animate) {
return function(scope, element, attrs) {
  element.on('click', function() {
    if(element.hasClass('clicked')) {
      $animate.removeClass(element, 'clicked');
    } else {
      $animate.addClass(element, 'clicked');
    }
  });
};
}]);