Angular 学习笔记——ng-animate
2024-09-17 07:45:59
<!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; 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{ width: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({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);
}
};
}); 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{ width: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({width:0,height:0},1000,done);
},
enter : function(element,done){
$(element).css({width:0,height:0});
$(element).animate({width: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>
最新文章
- java环境变量设定
- Device Channels in SharePoint 2013
- 通讯簿（apple）
- iOS设计模式——委托（delegate）
- （转） 如何在JavaScript与ActiveX之间传递数据1
- Bootstrap简易使用指南
- Spring环境配置
- Android项目---TouchListener
- matlab获取向量中出现次数最多的元素
- ajax bookstrap美化网页，并实现页面的加载，删除与查看详情
- POJ - 1190 生日蛋糕 dfs+剪枝
- day4 liaoxuefeng---函数式编程
- [原创]一种专门用于前后端分离的web服务器（JerryServer）
- (N叉树 BFS) leetcode429. N-ary Tree Level Order Traversal
- 【函数参数】什么是*args和**kwargs？
- react-redux笔记
- P2P贷款全攻略,贷前、贷中、贷后工作事项解析
- OC OD介绍
- [svc]通过ssh tunnel连接内网ECS和RDS
- 利用构造函数对canvas里面矩形与扇形的绘制进行一个封装