AngularJS 动画总结
对读过的几篇文章的总结,尽量保证逻辑性,不断补充、精简、更正。
后面会列出参考文章地址,方便以后取用。感谢各位作者以及翻译者。
一、如何使用
在angular中我们使用 ngAnimate
添加过渡和动画效果。
通过一个为 ng-view
添加动画效果的例子来演示使用方法
1)我们需要构建什么
-
使用
ngRoute
来为我们的页面路由 -
使用
ngAnimate
来为页面创建动画效果 -
对页面使用
CSS Animations
-
当我们离开或进入试图时,我们的每一个页面会有不同的动画效果
2)如何让它工作
ngAnimate 会根据是进入还是离开视图来为不同的Angular 指令(directive)添加和移除不同的CSS类名。例如,当我们加载网站时,无论ng-view中填充了什么都会得到一个.ng-enter
的类名。
我们所需要做的就是给.ng-enter
类名添加CSS动画效果,该动画在进入的时候会自动生效。
ngAnimate 可以应用于: ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView 以及 ngClass

3)开始我们的程序
(1) 文件结构,如下
- index.html
- style.css
- app.js
- page-home.html
- page-about.html
- page-contact.html
(2) index.html :
加载 AngularJS, ngRoute 以及 ngAnimate。用 bootstrap.css 来定义样式。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<!-- load bootstrap (bootswatch version) -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/readable/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!-- JS -->
<!-- load angular, ngRoute, ngAnimate -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>
<script src="app.js"></script>
</head>
<!-- apply our angular app -->
<body ng-app="animateApp">
<!-- inject our views using ng-view -->
<!-- each angular controller applies a different class here -->
<div class="page {{ pageClass }}" ng-view></div>
</body>
</html>
(3) Angular 程序 app.js:
创建程序、路由以及控制器。
// app.js
// define our application and pull in ngRoute and ngAnimate
var animateApp = angular.module('animateApp', ['ngRoute', 'ngAnimate']);
// ROUTING ===============================================
// set our routing for this application
// each route will pull in a different controller
animateApp.config(function($routeProvider) {
$routeProvider
// home page
.when('/', {
templateUrl: 'page-home.html',
controller: 'mainController'
})
// about page
.when('/about', {
templateUrl: 'page-about.html',
controller: 'aboutController'
})
// contact page
.when('/contact', {
templateUrl: 'page-contact.html',
controller: 'contactController'
});
});
// CONTROLLERS ============================================
// home page controller
animateApp.controller('mainController', function($scope) {
$scope.pageClass = 'page-home';
});
// about page controller
animateApp.controller('aboutController', function($scope) {
$scope.pageClass = 'page-about';
});
// contact page controller
animateApp.controller('contactController', function($scope) {
$scope.pageClass = 'page-contact';
});
(4) 视图 page-home.html, page-about.html, page-contact.html:
为每个页面准备一些文字以及链到其他页面的链接地址。
<!-- page-home.html -->
<h1>Angular Animations Shenanigans</h1>
<h2>Home</h2>
<a href="#about" class="btn btn-success btn-lg">About</a>
<a href="#contact" class="btn btn-danger btn-lg">Contact</a>
<!-- page-about.html -->
<h1>Animating Pages Is Fun</h1>
<h2>About</h2>
<a href="#" class="btn btn-primary btn-lg">Home</a>
<a href="#contact" class="btn btn-danger btn-lg">Contact</a>
<!-- page-contact.html -->
<h1>Tons of Animations</h1>
<h2>Contact</h2>
<a href="#" class="btn btn-primary btn-lg">Home</a>
<a href="#about" class="btn btn-success btn-lg">About</a>
(5) 为App添加动画效果 style.css:
ngAnimate为我们的ng-view添加的两个类分别是.ng-enter和.ng-leave
CSS动画
/* ANIMATIONS
============================================================================= */
/* leaving animations ----------------------------------------- */
/* rotate and fall */
@keyframes rotateFall {
0% { transform: rotateZ(0deg); }
20% { transform: rotateZ(10deg); animation-timing-function: ease-out; }
40% { transform: rotateZ(17deg); }
60% { transform: rotateZ(16deg); }
100% { transform: translateY(100%) rotateZ(17deg); }
}
/* slide in from the bottom */
@keyframes slideOutLeft {
to { transform: translateX(-100%); }
}
/* rotate out newspaper */
@keyframes rotateOutNewspaper {
to { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}
/* entering animations --------------------------------------- */
/* scale up */
@keyframes scaleUp {
from { opacity: 0.3; -webkit-transform: scale(0.8); }
}
/* slide in from the right */
@keyframes slideInRight {
from { transform:translateX(100%); }
to { transform: translateX(0); }
}
/* slide in from the bottom */
@keyframes slideInUp {
from { transform:translateY(100%); }
to { transform: translateY(0); }
}
进入和离开动画效果
我们只需要将这些动画效果应用给.ng-enter 或 .ng-leave就可以为我们的页面添加不用的动画效果。
/* style.css */
...
.ng-enter { animation: scaleUp 0.5s both ease-in; z-index: 8888; }
.ng-leave { animation: slideOutLeft 0.5s both ease-in; z-index: 9999; }
...
具体页面的动画效果
...
.ng-enter { z-index: 8888; }
.ng-leave { z-index: 9999; }
/* page specific animations ------------------------ */
/* home -------------------------- */
.page-home.ng-enter { animation: scaleUp 0.5s both ease-in; }
.page-home.ng-leave { transform-origin: 0% 0%; animation: rotateFall 1s both ease-in; }
/* about ------------------------ */
.page-about.ng-enter { animation:slideInRight 0.5s both ease-in; }
.page-about.ng-leave { animation:slideOutLeft 0.5s both ease-in; }
/* contact ---------------------- */
.page-contact.ng-leave { transform-origin: 50% 50%; animation: rotateOutNewspaper .5s both ease-in; }
.page-contact.ng-enter { animation:slideInUp 0.5s both ease-in; }
...
(6)预览地址:
http://plnkr.co/edit/uW4v9T?p=info
二、进阶
1)其他类 class
-
ng-enter-active
、ng-leave-active
对于
ng-repeat
主要是对一个list的展示,这些元素是是被创建出来加入到DOM结构中去的,那么,它的动画过程为创建元素 -> .ng-enter -> .ng-enter-active -> 完成,呈默认状态 默认状态 -> .ng-leave -> .ng-leave-active -> 销毁元素
可以通过设置.ng-enter(.ng-leave) 和 .ng-enter-active(.ng-leave-active) 的样式,加上css3的动画来显示出动画,如:
<!-- HTML片段 --> <div ng-init="users = [1,2,3,4,5]"></div> <input class="filter-btn" type="search" ng-model="u" placeholder="search item" aria-label="search item" /> <ul> <li class="item" ng-repeat="user in users | filter: u as result"> {{user}} </li> </ul> /* css片断 */ /*ng-repeat的元素*/ .item{ -webkit-transition: all linear 1s; -o-transition: all linear 1s; transition: all linear 1s; } /*动画开始前*/ .item.ng-enter{ opacity:0; } /*动画过程*/ .item-ng-enter-active{ opacity:1; }
-
ng-enter-stagger
上面的效果是对所有元素同时应用,可能实际运用中需要有一个先后的渐变出现的效果,这时候可以设置
ng-enter-stagger
来实现./*不同时出现*/ .item.ng-enter-stagger { transition-delay:0.5s; transition-duration:0; }
-
ng-enter-prepare
这是一个特殊的类,可以在实际的动画开始之前防止不必要的闪烁的内容。
<div ng-class="{red: myProp}"> <div ng-class="{blue: myProp}"> <div class="message" ng-if="myProp"></div> </div> </div>
可能在输入动画期间,.message div将在开始动画化之前被短暂地看到。
在这种情况下,可以向CSS添加下面的样式,以确保在动画启动前元素保持隐藏.message.ng-enter-prepare { opacity: 0; }
-
ng-animate-ref
通过使用名为
ng-animate-ref
的属性配对元素,来跨应用程序的结构区域(如视图)之间交叉动画元素的功能。
tips:自己理解为,跨页面的配对元素之间的过渡效果
官方例子:https://plnkr.co/edit/?p=preview
2)注意事项
-
使用
ng-hide
时需加上.ng-hide-add,.ng-hide-remove{ display: block!important; }
防止瞬间隐藏
-
关于
ng-show
、ng-hide
、ng-if
的区别(有机会单独写一篇总结)。简单地说:
ng-if
:元素存在不存在。
ng-show
、ng-hide
:元素显示不显示(本身是存在的)。比如:列表最后一行元素的下边框隐藏,
ng-show
、ng-hide
会出问题。li:last-child{ border-bottom:none; }
又比如:ionic的header里按钮的存在或者显示对标题字数的影响。