Laksanakan animasi dalam Angular menggunakan CSS3

Tiada lagi perkara karut, izinkan saya siarkan kod contoh untuk anda.

Lihat terus pada contoh:

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ngAnimate插件1</title> <script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular-animate.min.js"></script> <style type="text/css"> 
.box{width:200px;height:200px;background-color:red;transition:1s all;}
/*显示操作*/
.box.ng-enter{opacity:0;}
.box.ng-enter-active{opacity:1;}
/*隐藏操作*/
.box.ng-leave{opacity:1;}
.box.ng-leave-active{opacity:0;}
</style>
</head>
<body>
<div ng-controller="Aaa">
<input type="checkbox" ng-model="bBtn">
<div class="box" ng-if="bBtn"></div>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',['ngAnimate']);
m1.controller('Aaa',['$scope',function($scope){
$scope.bBtn = true;
}]);
</script>
</body>
</html>

Salin selepas log masuk

Memperkenalkan pemalam angular-animate, kami telah mengikat arahan ng-if Apabila memadam dan menambah nod DOM, angular akan menambah kelas yang ditentukan untuk memudahkan kami melengkapkan animasi.

.ng-enter
.ng-enter-active
.ng-tinggalkan
.ng-cuti-aktif

Sekarang lihat menunjukkan dan bersembunyi.

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ngAnimate插件4</title>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular-animate.min.js"></script>
<style type="text/css">
.box{width:200px;height:200px;background-color: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>
</head>
<body>
<div ng-controller="Aaa">
<input type="checkbox" ng-model="bBtn">
<div class="box" ng-show="bBtn"></div>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',['ngAnimate']);
m1.controller('Aaa',['$scope',function($scope){
$scope.bBtn = true;
}]);
</script>
</body>
</html>

Salin selepas log masuk

.ng-hide-remove
.ng-hide-remove-active
.ng-hide-add
.ng-hide-add-active

Dalam contoh ini kami menggunakan ng-show, yang tergolong dalam paparan dan sembunyikan. Contoh sebelumnya ialah ng-if, yang tergolong dalam penambahan dan pemadaman.

Mengingat laluan yang kami nyatakan di bahagian sebelumnya, kami boleh menggabungkannya.

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ngAnimate插件2</title> <script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-animate.min.js"></script> <style type="text/css">
.box{transition:1s all;position:absolute;}
/*显示操作*/
.box.ng-enter{opacity:0;}
.box.ng-enter-active{opacity:1;}
/*隐藏操作*/
.box.ng-leave{opacity:1;}
.box.ng-leave-active{opacity:0;}
</style>
</head>
<body>
<div ng-controller="Aaa">
<a href="javascript:void(0);" ng-click="$location.path('aaa')">首页</a>
<a href="javascript:void(0);" ng-click="$location.path('bbb')">内容</a>
<a href="javascript:void(0);" ng-click="$location.path('ccc')">标题</a>
<div class="box" ng-view></div>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',['ngRoute','ngAnimate']);
m1.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/aaa',{
template : '<h1>AAA</h1>{{name}}',
controller : 'Aaa'
}).when('/bbb',{
template : '<h1>BBB</h1>{{name}}',
controller : 'Bbb'
}).when('/ccc',{
template : '<h1>CCC</h1>{{name}}',
controller : 'Ccc'
}).otherwise({
redirectTo : '/aaa'
});
}]);
m1.controller('Aaa',['$scope','$location','$routeParams',function($scope,$location,$routeParams){
$scope.name = 'xiecg-Aaa';
$scope.$location = $location;
}]);
m1.controller('Bbb',['$scope',function($scope){
$scope.name = 'xiecg-Bbb';
}]);
m1.controller('Ccc',['$scope',function($scope){
$scope.name = 'xiecg-Ccc';
}]);
</script>
</body>
</html>

Salin selepas log masuk

Ini akan mempunyai kesan fade-in dan fade-out apabila menukar halaman.

Imbas kembali carian Baidu yang disebutkan dalam bab sebelumnya:

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ngAnimate插件3</title> <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular-animate.min.js"></script> <style type="text/css">
.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:0.1s;}
</style>
</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>
<script type="text/javascript">
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&#63;wd='+name+'&cb=JSON_CALLBACK',
}).success(function(data,state,headers,config){
console.log(data);
$scope.data = data.s;
}).error(function(data){
console.log(data);
});
},500);
};
}]);
</script>
</body>
</html>

Salin selepas log masuk

Melalui merentas domain kami mendapat data yang dikembalikan oleh Baidu dan mengalihkannya ke halaman mengikut turutan.

Mari kita lihat contoh animasi JS:

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ngAnimate插件5</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular-animate.min.js"></script>
<style type="text/css">
.box{width:200px;height:200px;background-color:red;}
</style>
</head>
<body>
<div ng-controller="Aaa">
<input type="checkbox" ng-model="bBtn">
<div class="box" ng-if="bBtn"></div>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',['ngAnimate']);
//ng-if
m1.animation('.box',function(){
return {
//hide（删除）
leave : function(element,done){
//console.log(element,done); //元素节点&删除节点的回调函数
$(element).animate({
width : 0,
height : 0
},1000,done);
},
//show（填充）
enter : function(element,done){
//ng-if会动态创建元素，元素默认就有200的高宽。。。
$(element).css({
width : 0,
height : 0
}).animate({
width : 200,
height : 200
},1000,done);
}
};
});
m1.controller('Aaa',['$scope',function($scope){
$scope.bBtn = true;
}]);
</script>
</body>
</html>

Salin selepas log masuk

Kami menggunakan perpustakaan animasi JQ untuk melengkapkan animasi JS Ambil perhatian bahawa kami menggunakan ng-if pada paparan, yang bermaksud menambah dan memadam nod DOM, jadi kami mengembalikan cuti&masuk dalam pengawal.

Dengan ng-if, animasi JS secara semula jadi adalah ng-show.

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ngAnimate插件5</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular-animate.min.js"></script>
<style type="text/css">
.box{width:200px;height:200px;background-color:red;}
</style>
</head>
<body>
<div ng-controller="Aaa">
<input type="checkbox" ng-model="bBtn">
<div class="box" ng-show="bBtn"></div>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',['ngAnimate']);
//ng-show
m1.animation('.box',function(){
return {
//hide（隐藏）
addClass : function(element,sClass,done){
//console.log(element,sClass,done); //元素节点&样式名&删除节点的回调函数
$(element).animate({
width : 0,
height : 0
},1000,done);
},
//show（显示）
removeClass : function(element,sClass,done){
$(element).animate({
width : 200,
height : 200
},1000,done); 
}
};
});
m1.controller('Aaa',['$scope',function($scope){
$scope.bBtn = true;
}]);
</script>
</body>
</html>

Salin selepas log masuk

Kembalikan addClass&removeClass dalam pengawal, menunjukkan menyembunyikan dan memaparkan.

Laksanakan animasi dalam Angular menggunakan CSS3_AngularJS