angular.animation的使用

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

overview

angular-animate.js插件可以对ng-repeat,ng-view,ui-view,ng-include,ng-switch,ng-if,ng-class,ng-show,ng-hide,form,ng-model等指令提供CSS3或者JS动画效果，这些指令分别两个梯队：

梯队一：DOM节点会被remove的梯队： if,view,repeat,include,switch

梯队二：DOM节点不会被remove，只是内容/样式会被改变的梯队： class, show, hide, model等

插件引入

HTML中引入angular-animate.js, 地址
在angular中注入ngAnimate模块

ng-animate之CSS3动画

以ui-view为例：

引入angular-animate插件和注入ngAnimate模块
引入angular-ui-route.js，配置$stateProvider
在css定义ng-enter，ng-leave的样式，可以用transition/animation
预览页面即可看到动画效果

原理：ng在这个指令进行内容切换时，默认会给内容加上ng-enter,ng-enter-active或者ng-leave,ng-leave-active样式。如图：输入图片说明

利用这个原理，我们就可以分别定义[ui-view]元素有上述class的样式和无上述class的样式，从而达到一个动画效果了。

但并不是每一个元素都是用ng-enter,ng-leave的，规则如下：

梯队一用的是：ng-enter, ng-enter-active, ng-leave, ng-leave-active （repeat: ng-enter-stagger animation-delay）

梯队二用的是：ng-hide-add, ng-hide-add-active, ng-hide-remove, ng-hide-remove-active

ng-animate之JavaScript动画

JavaScript实现动画的好处是兼容性好，具体的用法是在animation方法里返回一个对象，对象包含 enter/leave 或者 addClass/removeClass 方法的定义：

对于梯队一的指令，使用的是enter/leave:

angular.module("appAnimations", ["ngAnimate"])

// 注意使用的是css selector的animation-name
.animation(".anim", function(){
  return {
    //element：指令所在的DOM
    //done：指令封装好的方法，需要在动画结束时调用执行
    enter: function(element, done){
      $(element).animate({left: "100px"}, 1000, done)
    },

    leave: function(element, done){
      $(element).animate({left: "-100px"})
    }
  }
})

对于梯队二的指令，使用的是addClass/removeClass:

angular.module("appAnimations", ["ngAnimate"])

.animation(".anim", function(){
  return {
    //element：指令所在的DOM
    //className: 被添加/被去掉的类名
    //done：指令封装好的方法，需要在动画结束时调用执行
    addClass: function(element, className, done){
      if("active" != className) return
      $(element).animate({left: "100px"}, 1000, done)
    },

    removeClass: function(element, className, done){
      if("active" != className) return
      $(element).animate({left: "-100px"})
    }
  }
})

具体操作步骤：