利用CSS3在Angular中实现动画_AngularJS-js教程-PHP中文网

首页

web前端

js教程

利用CSS3在Angular中实现动画_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:19 PM

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

直接看例子：

<!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 id="AAA">AAA</h1>{{name}}',
controller : 'Aaa'
}).when('/bbb',{
template : '<h1 id="BBB">BBB</h1>{{name}}',
controller : 'Bbb'
}).when('/ccc',{
template : '<h1 id="CCC">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&#63;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，表示隐藏和显示。

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。