Maison > Article > interface Web > Implémenter l'animation dans Angular en utilisant CSS3_AngularJS
Plus de bêtises, permettez-moi de poster l'exemple de code pour vous.
Regardez directement l'exemple :
<!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>
En présentant le plug-in angulaire-animate, nous avons lié l'instruction ng-if Lors de la suppression et de l'ajout de nœuds DOM, angulaire ajoutera la classe spécifiée pour nous permettre de terminer l'animation.
.ng-enter
.ng-enter-active
.ng-congé
.ng-leave-active
Regardons maintenant afficher et masquer.
<!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>
.ng-hide-remove
.ng-hide-remove-active
.ng-hide-add
.ng-hide-add-active
Dans cet exemple, nous utilisons ng-show, qui appartient à display et hide. L'exemple précédent est ng-if, qui appartient à l'addition et à la suppression.
En rappelant le routage que nous avons évoqué dans la section précédente, nous pouvons les combiner.
<!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>
Cela aura un effet de fondu entrant et sortant lors du changement de page.
Rappelez la recherche Baidu mentionnée dans les chapitres précédents :
<!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?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>
Grâce au cross-domain, nous obtenons les données renvoyées par Baidu et les transférons vers la page dans l'ordre.
Regardons un exemple d'animation 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>
Nous utilisons la bibliothèque d'animation JQ pour compléter l'animation JS. Notez que nous utilisons ng-if sur la vue, ce qui signifie ajouter et supprimer des nœuds DOM, nous renvoyons donc Leave&Enter dans le contrôleur.
Avec ng-if, l'animation JS est naturellement 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>
Renvoyer addClass&removeClass dans le contrôleur, indiquant le masquage et l'affichage.