时间:2021-05-25
废话不多说了,直接给大家贴实例代码。
直接看例子:
<!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
现在再看看显示和隐藏。
.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插件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动画的例子:
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-showm1.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,表示隐藏和显示。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
在学习css3的过程中,发现很多看着炫酷的效果,利用css3的属性能很简单的实现,animation是css3动画效果中常见的属性。下面让我们了解一下如何利用这
前言本文主要给大家分享的是关于利用CSS3动画实现圆圈由小变大向外扩散的效果实例,文中涉及到CSS3的动画(animation)、2D转换(transform:
本篇文章主要介绍了css3实现文字扫光渐变动画效果的示例,分享给大家,具体如下:利用css3这个属性(背景剪裁):background-clip:border-
一、css3动画☺css3动画相对于通过JavaScript动态改变元素样式性能更好,更加容易。CSS3中有三个关于动画的属性:transform、
今天给大家分享一款纯css3实现的win8加载动画。在这款实例中动画效果完全由css3实现。一起看下效果图: 实现的代码。 html代码:XML/HTM