欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

利用CSS3在Angular中实现动画

程序员文章站 2023-08-27 19:30:47
废话不多说了,直接给大家贴实例代码。 直接看例子: ...

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

直接看例子:

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