標籤:cdn ddc r.js otc rem function tle console put
<!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({width:0,height:0}); /// $(element).animate({width:0,height:0}); $(element).animate({width:200,height:200},1000,done); }, leave:function(element,done){ $(element).animate({width: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({width:0,height:0},1000,done); }, removeClass:function(element,Sclass,done){ $(element).css({width:0,height:0}); $(element).animate({width: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>
angularjs1--動畫