<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> .box{ 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"> <div ng-show="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{ 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({0,height:0},1000,done); }, removeClass : function(element,sClass,done){ $(element).css({0,height:0}); $(element).animate({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>
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> .box{ 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 { leave : function(element,done){ //console.log(element); //console.log(sClass); //console.log(done); $(element).animate({0,height:0},1000,done); }, enter : function(element,done){ $(element).css({0,height:0}); $(element).animate({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-if="bBtn" class="box"></div> </div> </body> </html>