首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

利用CSS3在Angular中实现动画

Posted in Javascript onJanuary 15, 2016

废话不多说了，直接给大家贴实例代码。

直接看例子：

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ngAnimate插件1</title> <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;transition:1s all;}
/*显示操作*/
.box.ng-enter{opacity:0;}
.box.ng-enter-active{opacity:1;}
/*隐藏操作*/
.box.ng-leave{opacity:1;}
.box.ng-leave-active{opacity:0;}
</style>
</head>
<body>
<div ng-controller="Aaa">
<input type="checkbox" ng-model="bBtn">
<div class="box" ng-if="bBtn"></div>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',['ngAnimate']);
m1.controller('Aaa',['$scope',function($scope){
$scope.bBtn = true;
}]);
</script>
</body>
</html>

引入angular-animate插件，我们绑定了ng-if指令，在删除和添加DOM节点的时候，angular会添加指定的class，方便我们完成动画。

.ng-enter
.ng-enter-active
.ng-leave
.ng-leave-active

现在再看看显示和隐藏。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ngAnimate插件4</title>
<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;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>
</head>
<body>
<div ng-controller="Aaa">
<input type="checkbox" ng-model="bBtn">
<div class="box" ng-show="bBtn"></div>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',['ngAnimate']);
m1.controller('Aaa',['$scope',function($scope){
$scope.bBtn = true;
}]);
</script>
</body>
</html>

.ng-hide-remove
.ng-hide-remove-active
.ng-hide-add
.ng-hide-add-active

这个例子我们使用的是ng-show，属于显示和隐藏。上一个例子是ng-if，属于添加和删除。

回顾上一节我们提到的路由，我们可以结合起来操作。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ngAnimate插件2</title> <script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-animate.min.js"></script> <style type="text/css">
.box{transition:1s all;position:absolute;}
/*显示操作*/
.box.ng-enter{opacity:0;}
.box.ng-enter-active{opacity:1;}
/*隐藏操作*/
.box.ng-leave{opacity:1;}
.box.ng-leave-active{opacity:0;}
</style>
</head>
<body>
<div ng-controller="Aaa">
<a href="javascript:void(0);" ng-click="$location.path('aaa')">首页</a>
<a href="javascript:void(0);" ng-click="$location.path('bbb')">内容</a>
<a href="javascript:void(0);" ng-click="$location.path('ccc')">标题</a>
<div class="box" ng-view></div>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',['ngRoute','ngAnimate']);
m1.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/aaa',{
template : '<h1>AAA</h1>{{name}}',
controller : 'Aaa'
}).when('/bbb',{
template : '<h1>BBB</h1>{{name}}',
controller : 'Bbb'
}).when('/ccc',{
template : '<h1>CCC</h1>{{name}}',
controller : 'Ccc'
}).otherwise({
redirectTo : '/aaa'
});
}]);
m1.controller('Aaa',['$scope','$location','$routeParams',function($scope,$location,$routeParams){
$scope.name = 'xiecg-Aaa';
$scope.$location = $location;
}]);
m1.controller('Bbb',['$scope',function($scope){
$scope.name = 'xiecg-Bbb';
}]);
m1.controller('Ccc',['$scope',function($scope){
$scope.name = 'xiecg-Ccc';
}]);
</script>
</body>
</html>

这样在切换页面的时候就有淡入淡出的效果。

再回顾前面的几章讲的百度搜索：

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ngAnimate插件3</title> <script type="text/javascript" src="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{transition:1s all;}
/*显示操作*/
.box.ng-enter{opacity:0;}
.box.ng-enter-active{opacity:1;}
/*隐藏操作*/
.box.ng-leave{display:none;}
.box.ng-enter-stagger{animation-delay:0.1s;}
</style>
</head>
<body>
<div ng-controller="Aaa">
<input type="text" ng-model="name" ng-keyup="change(name)">
<input type="button" ng-click="change(name)" value="搜索">
<ul>
<li class="box" ng-repeat="d in data">{{d}}</li>
</ul>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',['ngAnimate']);
m1.controller('Aaa',['$scope','$http','$timeout',function($scope,$http,$timeout){
var timer = null;
$scope.data = [];
$scope.change = function(name){
$timeout.cancel(timer);
timer = $timeout(function(){
$http({
method : 'JSONP',
url : 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+name+'&cb=JSON_CALLBACK',
}).success(function(data,state,headers,config){
console.log(data);
$scope.data = data.s;
}).error(function(data){
console.log(data);
});
},500);
};
}]);
</script>
</body>
</html>

通过跨域我们得到百度返回过来的数据，依次过渡显示到页面上。

下面来看JS动画的例子：

<!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="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 class="box" 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="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 class="box" 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，表示隐藏和显示。

利用CSS3在Angular中实现动画

- Author -

小谢53

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
Vue分页组件实例代码
Apr 17 Javascript
VUE接入腾讯验证码功能（滑块验证）备忘
May 07 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 #Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 #Javascript
JavaScript知识点总结之如何提高性能
Jan 15 #Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
Jan 15 #Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 #Javascript
JavaScript提高性能知识点汇总
Jan 15 #Javascript
学习JavaScript设计模式之中介者模式
Jan 14 #Javascript
主题(1) ForkJoin(1) CompletableFuture(1) JAVA(88) FutureTask(3) Springboot-cli(1) 底部导航(1) 异步回调(1) 对齐打印(1) format(1)
You might like
通过对服务器端特性的配置加强php的安全
2006/10/09 PHP
聊天室php&amp;mysql(二)
2006/10/09 PHP
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
附件名前加网站名
2008/03/23 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
PHP实现搜索相似图片
2015/09/22 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
js字符编码函数区别分析
2008/06/05 Javascript
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
2020/08/28 Javascript
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
巴西最大的家具及装饰用品店：Mobly
2017/10/11 全球购物
医学院四年学习生活的自我评价
2013/11/06 职场文书
教育局长自荐信范文
2013/12/22 职场文书
结婚喜宴主持词
2014/03/14 职场文书
2014年工程师工作总结
2014/11/25 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
学校教学管理制度
2015/08/06 职场文书
小学英语教学随笔
2015/08/14 职场文书
比较几种Redis集群方案
2021/06/21 Redis