<!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="https://www.jb51.net/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 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>
JS动画我们使用JQ的动画库来完成，注意我们在视图上使用的是ng-if，表示添加和删除DOM节点，所以我们在控制器return leave&enter。
JS动画有了ng-if，自然就是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="https://www.jb51.net/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 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>
在控制器return addClass&removeClass，表示隐藏和显示。
您可能感兴趣的文章: