angular 插件ngAnimate
孙言
ngAnimate
-
作用：为页面添加动画效果
-
步骤：
（1）引入 js angular-animate.min.js
注：引入的插件版本不要比angular.js的版本高
（2）在 module 中引入一下插件 var app = angular.module(“myApp”, [‘ngAnimate’]);当我们有一个单页面的程序，并且想为这个页面添加动画效果。点击某一个链接会将一个试图滑出，同时将另一个试图滑入。就会用到 ngAnimate。
-
添加动画的方式
- ngAnimate CSS3 的方式 （1 ）
css指令：ng-enter、ng-enter-active、ng-leave、ng-leave-active
支持的指令：if,view,repeat,include,swtich、repeat：ng-enter-stagger animation-delay
案例：淡入淡出
danc<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.box{ width:200px; height:200px; background:red; transition:1s all;}
/*刚进入的时候CSS的样式*/
.box.ng-enter{ opacity:0;}
/*进入完成以后的css样式*/
.box.ng-enter-active{ opacity:1;}
/*刚要离开时的css样式*/
.box.ng-leave{ opacity:1;}
/*离开完成后的css样式*/
.box.ng-leave-active{ opacity:0;}
</style>
<script src="angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-animate.min.js"></script>
<script>
var m1 = angular.module('myApp',['ngAnimate']);
m1.controller('Aaa',['$scope',function($scope){
$scope.bBtn = true;
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
<input type="checkbox" ng-model="bBtn">
<!--用的if只能用enter/leave系列-->
<div ng-if="bBtn" class="box"></div>
</div>
</body>
</html>
案例：百度搜索关键字自动显示列表
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ transition:1s all;}
.box.ng-enter{ opacity:0;}
.box.ng-enter-active{ opacity:1;}
.box.ng-leave{ display:none;}
.box.ng-enter-stagger{
animation-delay : 100ms;
}
</style>
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular-animate.min.js"></script>
<script>
var m1 = angular.module('myApp',['ngAnimate']);
m1.controller('Aaa',['$scope','$http','$timeout',function($scope,$http,$timeout){
var timer = null;
$scope.data = [];
$scope.change = function(name){
$timeout.cancel(timer);
timer = $timeout(function(){
$http({
method : 'JSONP',
url : 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+name+'&cb=JSON_CALLBACK'
}).success(function(data){
//console.log(data);
$scope.data = data.s;
});
},500);
};
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
<input type="text" ng-model="name" ng-keyup="change(name)">
<input type="button" ng-click="change(name)" value="搜索">
<ul>
<li class="box" ng-repeat="d in data">{{d}}</li>
</ul>
</div>
</body>
</html>
- ngAnimate CSS3 的方式 （2）
css指令：ng-hide-add、ng-hide-add-active、ng-hide-remove、ng-hide-remove-active
支持的指令：class,show,hide,model 等
案例：淡入淡出
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:200px; height:200px; background:red; transition:1s all;}
.box.ng-hide-remove{ opacity:0;}
.box.ng-hide-remove-active{ opacity:1;}
.box.ng-hide-add{ opacity:1;}
.box.ng-hide-add-active{ opacity:0;}
</style>
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular-animate.min.js"></script>
<script>
var m1 = angular.module('myApp',['ngAnimate']);
m1.controller('Aaa',['$scope',function($scope){
$scope.bBtn = true;
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
<input type="checkbox" ng-model="bBtn">
<!--用show所以得用ng-hide-->
<div ng-show="bBtn" class="box"></div>
</div>
</body>
</html>
- ngAnimate JS 方式
js指令：animation()、enter/leave、removeClass/addClass
案例：滑入滑出，使用removeClass/addClass
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.box{ width:200px; height:200px; background:red;}
</style>
<script src="jquery-1.11.1.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular-animate.min.js"></script>
<script>
var m1 = angular.module('myApp',['ngAnimate']);
m1.animation('.box',function(){
return {
addClass : function(element,sClass,done){
console.log(element);
console.log(sClass);
console.log(done);
$(element).animate({width:0,height:0},1000,done); //done运动完成指令操作
},
removeClass : function(element,sClass,done){
$(element).css({width:0,height:0});
$(element).animate({width:200,height:200},1000,done);
}
};
});
m1.controller('Aaa',['$scope',function($scope){
$scope.bBtn = true;
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
<input type="checkbox" ng-model="bBtn">
<!--<div ng-if="bBtn" class="box"></div>-->
<div ng-show="bBtn" class="box"></div>
</div>
</body>
</html>
案例：滑入滑出，使用enter/leave
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:200px; height:200px; background:red; }
</style>
<script src="jquery-1.11.1.js"></script>
<script src="angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-animate.min.js"></script>
<script>
var m1 = angular.module('myApp',['ngAnimate']);
m1.controller('firstController',['$scope',function($scope){
$scope.bBtn = true;
}]);
m1.animation('.box',function(){
return{
// elemnet：动画元素、done：动画后的回调
enter:function(element,done){
console.log(element);
console.log(done);
$(element).css({width:0,height:0});
$(element).animate({width:200,height:200},1000,done);
},
leave:function(element,done){
$(element).animate({width:0,height:0},1000,done);
}
}
});
</script>
</head>
<body>
<div ng-controller="firstController">
<input type="checkbox" ng-model="bBtn">
<div ng-if="bBtn" class="box"></div>
</div>
</body>
</html>
类似资料：