AngularJS基础教程

ngAnimate

前言

ngAnimate 模块提供了在 AngularJS 中制作动画效果的功能。

如何获得 ngAnimate

点击这里到官网查找获得 ngAnimate 的方法。

使用 npm 获得 ngAnimate 的方法：

npm install angular-animate

也可以指定版本号：

npm install angular-animate@X.Y.Z

将 X.Y.X 替换为你想要的版本号即可。

ngAnimate如何工作

ngAnimate 会在拥有某些指令的元素（如ng-view）在状态改变时自动为其加入一些 class。

以 ng-view 为例，当一个模板正将进入时，会被加入 ng-enter，进入时会被加入 ng-enter-active，将离开时会被加入 ng-leave，离开时会被加入 ng-leave-active。

我们可通过设置这些 class 的属性来制作动画效果。

页面切换的示例

在这个例子中我们使路由之间的切换效果为从右往左滑入的效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ngAnimate</title>
<style type="text/css">
html,body{padding:0px;margin:0px;height:100%;overflow:hidden;}
#container{height:100%;position:relative;}
#container > div[ng-view]{position:absolute;left:0px;right:0px;top:50px;bottom:0px;overflow-x:hidden;overflow-y:auto;border:1px solid #444;background-color:#e9e8e8;}
.ng-enter{transition:0.5s;transform:translateX(100%);}
.ng-enter-active{transform:translateX(0px);}
.ng-leave{transition:0.5s;}
.ng-leave-active{transform:translateX(-100%);}
</style>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/angular-animate.min.js"></script>
</head>
<body ng-app="myApp">
<div id="container">
<a href="#/index">首页</a>
<a href="#/lst">商品列表</a>
</div>
<script type="text/javascript">
var app = angular.module('myApp', ['ngRoute', 'ngAnimate']);
app.config(function ($routeProvider) {
$routeProvider.when('/index', {
template: '<div>这是首页</div>'
}).when('/lst', {
template: '<div>这是商品列表页</div>'
}).otherwise({
redirectTo: '/index'
});
});
</script>
</body>
</html>

以上示例中，所有路由之间的切换效果均为从左往右滑动的效果。但有些时候我们可能并不想这样。例如，在本示例中，我希望在“首页”和“商品列表”之间切换时是没有效果的，只在“商品列表”和“商品详情”之间切换时需要效果。

要实现此功能，可以监听 $routeChangeStart 事件，在路由切换之间判断是否应该使用动画效果、以及应该使用何种效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ngAnimate</title>
<style type="text/css">
html,body{padding:0px;margin:0px;height:100%;overflow:hidden;}
#container{height:100%;position:relative;}
#container > div[ng-view]{position:absolute;left:0px;right:0px;top:50px;bottom:0px;overflow-x:hidden;overflow-y:auto;border:1px solid #444;background-color:#e9e8e8;}
.slide>.ng-enter{transition:0.5s;transform:translateX(100%);}
.slide>.ng-enter-active{transform:translateX(0px);}
.slide>.ng-leave{transition:0.5s;}
.slide>.ng-leave-active{transform:translateX(-100%);}
</style>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/angular-animate.min.js"></script>
</head>
<body ng-app="myApp">
<div id="container">
<a href="#/index">首页</a>
<a href="#/lst">商品列表</a>
</div>
<script type="text/javascript">
var divContainer = angular.element(document.getElementById('container'));
var app = angular.module('myApp', ['ngRoute', 'ngAnimate']);
app.config(function ($routeProvider) {
$routeProvider.when('/index', {
template: '<div>这是首页</div>'
}).when('/lst', {
template: '<div>这是商品列表页<br/><a href="#/detail/2">商品一</a></div>'
}).when('/detail/:id', {
template: '<div>这是商品详情页</div>'
}).otherwise({
redirectTo: '/index'
});
});
app.run(function ($rootScope) {
// 为“路由开始改变”绑定事件
$rootScope.$on('$routeChangeStart', function (evt, next, current) {
divContainer.removeAttr('class'); // 在路由开始改变时（还未开始改变）移除divContainer上的所有class，这里是先假定不使用任何动画效果
if (next.$$route.originalPath == '/detail/:id' && current && current.$$route.originalPath == '/lst') {
// 当即将切换到的路由的路径为“/detail/:id”（即商品详情），且当前路由的路径为“'/lst'”时，给 divContainer 加入一个 class，使其具有动画效果
divContainer.addClass('slide');
}
});
});
</script>
</body>
</html>

最后，来个广告

若你觉得此文不错，请分享，若认为尚需改进，请点讚。

结束语

AngularJS基础教程 - 目录

关于我：google.com/+YFCAO
由nooong.com提供空间支援。