Angular动画执行过程:
.class.ng-animate-class
支持ngAnimate的基本指令
ngShow
ngHide
ngIf
ngRepeat
ngView
ngClass
ngInclude
ngSwitch
怎样自定义动画
app.animation('.className',function(){//定义一个className
return{
'handle':function(element,className,done){
//element:当前执行动画的节点元素
//done:通知angular动画执行完毕
jQuery(element).animate({
'color':'red',
'background':'red'
},done)
return function(cancelled){//cancelled:判断是否手动终端还是自动完成
//callback
}
}
}
})
demo
<!doctype html>
<html ng-app="app">
<head>
<title>demo</title>
<meta Content-Type="html/text;charset=utf-8">
<style>
div{
width:160px;
height:160px;
background:#b36ae2;
}
//.fade.ng-enter{opacity:0;}
//.fade{transition:1s linear all;}
//.fade.ng-enter.ng-enter-active{opacity:1;}
//.fade.ng-leave{opacity:1;}
//.fade.ng-leave.ng-leave-active{opacity:0;}
</style>
</head>
<body ng-controller="ctrl">
<div ng-if="show" class="fade"></div>
<button ng-click="show=!show">click</button>
</body>
<script src="framework/js/angular.min.js"></script>
<script src="framework/js/angular-animate.js"></script>
<script src="js/demo.js"></script>
</html>
js
var APP = angular.module('app',[])
APP.controller('ctrl',['$scope',function($scope){
}])
页面显示效果:
Angular官方动画库:http://augus.github.io/ngAnimate/
