利用CSS3在Angular中实现动画  更新时间:2016年01月15日 11:27:50   作者:小谢53   这篇文章主要介绍了如何利用CSS3在Angular中实现动画效果,对angular动画相关知识感兴趣的朋友一起学习吧 废话不多说了,直接给大家贴实例代码。 直接看例子: ngAnimate插件1 引入angular-animate插件,我们绑定了ng-if指令,在删除和添加DOM节点的时候,angular会添加指定的class,方便我们完成动画。 .ng-enter .ng-enter-active .ng-leave .ng-leave-active 现在再看看显示和隐藏。 ngAnimate插件4 .ng-hide-remove .ng-hide-remove-active .ng-hide-add .ng-hide-add-active 这个例子我们使用的是ng-show,属于显示和隐藏。上一个例子是ng-if,属于添加和删除。 回顾上一节我们提到的路由,我们可以结合起来操作。 ngAnimate插件2 首页 内容 标题 这样在切换页面的时候就有淡入淡出的效果。 再回顾前面的几章讲的百度搜索: ngAnimate插件3 {{d}} 通过跨域我们得到百度返回过来的数据,依次过渡显示到页面上。 下面来看JS动画的例子: ngAnimate插件5 JS动画我们使用JQ的动画库来完成,注意我们在视图上使用的是ng-if,表示添加和删除DOM节点,所以我们在控制器return leave&enter。 JS动画有了ng-if,自然就是ng-show。 ngAnimate插件5 在控制器return addClass&removeClass,表示隐藏和显示。 您可能感兴趣的文章: Angular4.0动画操作实例详解 Angular4如何自定义首屏的加载动画详解 Angular2搜索和重置按钮过场动画 基于Angular.js实现的触摸滑动动画实例代码 给angular加上动画效遇到的问题总结 AngularJS中实现显示或隐藏动画效果的方式总结 使用ngView配合AngularJS应用实现动画效果的方法 在AngularJS应用中实现一些动画效果的代码 详解Angular路由动画及高阶动画函数 angular 动画 相关文章 Angular4学习笔记之实现绑定和分包 本篇文章主要介绍了Angular4学习笔记之实现绑定和分包,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-08-08 angularjs实现时间轴效果的示例代码 本篇文章主要介绍了angularjs实现时间轴效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-11-11 详解Angular结合zTree异步加载节点数据 本篇文章主要给大家分享了Angular结合zTree异步加载节点数据的难点以及方法,有这方面需求的朋友参考下吧。 2018-01-01 详谈Angular路由与Nodejs路由的区别 下面小编就为大家带来一篇详谈Angular路由与Nodejs路由的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-03-03 详解AngularJS实现表单验证 这篇文章主要介绍了AngularJS实现表单验证,客户端表单验证是AngularJS里面最酷的功能之一。AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单,对AngularJS表单验证感兴趣的小伙伴们可以参考一下 2015-12-12 AngularJs 弹出模态框(model) 这篇文章主要介绍了AngularJs 弹出模态框(model)的相关资料,需要的朋友可以参考下 2016-04-04 详解Angular.js数据绑定时自动转义html标签及内容 本篇文章主要介绍了详解Angular.js数据绑定时自动转义html标签及内容 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 2017-03-03 Angular2使用Augury来调试Angular2程序 这篇文章主要介绍了Angular2使用Augury来调试Angular2程序,非常具有实用价值,需要的朋友可以参考下 2017-05-05 Angularjs中使用指令绑定点击事件的方法 本篇文章主要介绍了Angularjs中使用指令绑定点击事件的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 2017-03-03 es6+angular1.X+webpack 实现按路由功能打包项目的示例 本篇文章主要介绍了es6+angular1.X+webpack 实现按路由功能打包项目的示例,具有一定的参考价值,有需要的可以了解一下 2017-08-08 最新评论

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

直接看例子:

<!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,表示隐藏和显示。

您可能感兴趣的文章:

  • Angular4.0动画操作实例详解
  • Angular4如何自定义首屏的加载动画详解
  • Angular2搜索和重置按钮过场动画
  • 基于Angular.js实现的触摸滑动动画实例代码
  • 给angular加上动画效遇到的问题总结
  • AngularJS中实现显示或隐藏动画效果的方式总结
  • 使用ngView配合AngularJS应用实现动画效果的方法
  • 在AngularJS应用中实现一些动画效果的代码
  • 详解Angular路由动画及高阶动画函数
张贴在3