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"})
}
}
})
具体操作步骤:
- 引入angular-animate插件和注入
ngAnimate
模块 - 根据指令,选择并定义好上述animation方法
- 运行预览效果即可
参考资料: