<!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{ enter:function(element,done){ console.log(element); console.log(done); $(element).css({0,height:0}); /// $(element).animate({0,height:0}); $(element).animate({200,height:200},1000,done); }, leave:function(element,done){ $(element).animate({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>
<!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{ addClass:function(element,Sclass,done){ // console.log(element); // console.log(Sclass); // console.log(done); $(element).animate({0,height:0},1000,done); }, removeClass:function(element,Sclass,done){ $(element).css({0,height:0}); $(element).animate({200,height:200},1000,done); } } }); </script> </head> <body> <div ng-controller="firstController"> <input type="checkbox" ng-model="bBtn"> <div ng-show="bBtn" class="box"></div> </div> </body> </html>