AngularJS 实现JavaScript 动画效果详解
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
作者 红领巾 ]
AngularJS 应用中实现
动画效果AngularJS 是一组用于创建单页Web应用的丰富框架，给构建丰富交互地应用带来了所有需要的功能。其中一项主要的特性就是Angular带来了对动画的支持。我们能够在应用的部分内容当中使用动画来表明一些变化正在发生。在我上一篇文章当中，我讲到了在Angular应用中对CSS动画的支持。在这篇文章当中，我们会看到怎样利用JavaScript脚本在AngularJS应用当中生成动画效果。在Angular当中，CSS和JavaScript之间唯一的区别就是它们的定义。没有什么区别妨碍到被定义的动画被使用。首先，我们需要加载ngAnimate模块到我们应用的root模块当中。&angular.module('coursesApp', ['ngAnimate']);&而所有将被处理的JavaScript动画事件依然保持不变。以下是一个直接支持的动画列表和它们对应的不同行为：指令事件集ng-view&ng-include &ng-switch &ng-if enter &leave ng-repeat enter &leave &move ng-show &ng-hide &ng-class add &remove以上列表和上一篇文章一样，但没有提到相应的CSS类，因为我们不需要用到它们来定义JavaScript动画。所有这些事件只有在应用模块加载了ngAnimate模块后才会产生。现在让我们看一看如何让这些指令动起来。自定义Angular动画的语法以下是一个自定义JavaScript动画基本的框架： angular.module('coursesApp').animation('.name-of-animation', function(&injectables&) { return { event: function(elem, done){ //logic of animation done(); } };}); 这是有一些在AngularJS中写JavaScript动画时需要记住的要点：1.动画的名字以点（.）开头2.所有动画行为接受两个参数：•在当前即将运行动画的DOM元素中的一个对象，要么是在jQuery没有赶在AngularJS加载之前进行加载的一个jQlite对象，要么是一个jQuery对象。•一个动画结束时的回调函数。指令对应的行为动作被暂停，直到回调函数被调用。我们有若干的JavaScript库，像jQuery、Greensock、Anima和其它几个让编写动画变得容易的库。为了保持简洁，我正在这篇文章中使用jQuery来创建动画。为了学习其它几个库，你可以访问它们对应的网站。让ng-view动起来在一个ng-view指令上使用的动画在切换AngularJS应用的视图时运行。以下是一块视图正在出现时，动画所引起的视觉效果：courseAppAnimations.animation('.view-slide-in', function () { return { enter: function(element, done) { element.css({ opacity: 0.5, position: "relative", top: "10px", left: "20px" }) .animate({ top: 0, left: 0, opacity: 1 }, 1000, done); } };}); 以上创建了一个视图进入画面时的滑入效果。其中done方法被做为回调函数传入。这是为了表明动画已经结束，并且现在AngularJS框架可以继续下一个动作。注意animate()方法被调用的方法。我们不必将这个元素转换成一个jQuery对象，因为jQuery在加载AngularJS前已经加载。现在我们需要应用这个动画效果到ng-view指令上。尽管这个动画是在JavaScript里定义的，按照约定我们使用一个class标记来将它应用到目标指令上。ng-repeat 动画 在你可以选择使用的指令里面，ng-repeat是一个非常重要的指令。还有两个基本的操作指令是过滤和排序。根据执行的操作添加，移动，或者移除相应的指令。下面演示使用一些基本的动画，当发生变化的时候你就可以看到相应的动画效果。courseAppAnimations.animation('.repeat-animation', function () { return { enter : function(element, done) { console.log("entering..."); var width = element.width(); element.css({ position: 'relative', left: -10, opacity: 0 }); element.animate({ left: 0, opacity: 1 }, done); }, leave : function(element, done) { element.css({ position: 'relative', left: 0, opacity: 1 }); element.animate({ left: -10, opacity: 0 }, done); }, move : function(element, done) { element.css({ left: "2px", opacity: 0.5 }); element.animate({ left: "0px", opacity: 1 }, done); } };});Ng-hide动画ng-hide指令用于添加或移除目标元素的ng-hide样式类。 为了使用某个动画，我们经常需要添加或移除css样式。 将类名传递给动画处理类来实现这个效果。 这可以让我们检查这个类，对代码进行适当的修改。下面是一个动画的示例代码，用ng-hide指令实现元素的渐隐渐显效果：&courseAppAnimations.animation('.hide-animation', function () { return { beforeAddClass : function(element, className, done) { if (className === 'ng-hide') { element.animate({ opacity: 0 },500, done); } else { done(); } }, removeClass : function(element, className, done) { if (className === 'ng-hide') { element.css('opacity',0); element.animate({ opacity: 1 }, 500, done); } else { done(); } } };});让自定义指令动起来为了让自定义指令产生动画效果，我们需要用到$animate 这个服务。尽管$animate服务 是AngularJS核心框架的一部分，也需要加载ngAnimate后才能让这个服务发挥最大的作用。使用上一篇文章中同样的例子，我们将展现一页课程列表。我们创建一条指令来显示格子中课程的细节内容，并且格子中的内容会在点击"View Statistics"这个链接时改变。让我们添加一种动画来把这个转换效果呈现给用户。当转换动画开始的时候，我们将添加一个CSS类标记，结束时，移去这个类标记。以下是针对这个指令的示例代码：app.directive('courseDetails', function ($animate) { return { scope: true, templateUrl: 'courseDetails.html', link: function (scope, elem, attrs) { scope.viewDetails = elem.find('button').bind('click', function () { $animate.addClass(elem, "switching", function () { elem.removeClass("switching"); scope.viewDetails =! scope.viewD scope.$apply(); }); }); } };}); &正如你所看到的，我们在动画结束时执行这个动作。在浏览器的开发者工具中，我们会在查看指令元素时发现switching-active和switching-add这两个类标记正被很快的添加随后被移除。我们可以通过定义一个CSS转换样式或者一个自定义的JavaScript动画来查看动画的效果。以下就是一个简单地CSS转换样式，可以被用于上面提到的指令，为了简洁性我们移去了特定的前缀：.det-anim.switching { transition: all 1 position: opacity: 0.5; left: -20} 又或者，这里有一个jQuery写的动画，可以用于同样的指令：courseAppAnimations.animation('.js-anim', function () { return { beforeAddClass: function(element, className, done) { if (className === 'switching') { element.animate({ opacity: 0 },1000, function (){ element.css({ opacity: 1 }); done(); }); } else { done(); } } }}); 这些动画当中，如果它可以应用于内建的指令上，它同样也可以被应用到自定义的指令上：&div course-details
class="det-anim" title="{{course.title}}"&&/div& 你可以在示例页面看到以上所有的动画运行时的效果。结论动画，当被适合并正常的运用时，将给应用程序带来生气。正如我们所看到的，AngularJS对CSS和JavaScript动画都提供各种支持。你可以根据团队的情况来挑选其中一种。但是，使用太多的动画将会使得应用程序变得缓慢，而对于用户来，这将使应用程序看起来i不够人性化。所以，必须小心并最优化的使用这件利器。&
本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
船到江心难补漏,马到悬崖难回头!是非皆因开口多,祸事皆因强出头!万花丛中过,片叶不沾身
手机客户端
，专注代码审计及安全周边编程，转载请注明出处：http://www.codesec.net
转载文章如有侵权，请邮件 admin[at]codesec.net使用ngView配合AngularJS应用实现动画效果的方法
投稿：goldensun
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了使用ngView配合AngularJS应用实现动画效果的方法,AngularJS是十分热门的JavaScript库,需要的朋友可以参考下
AngularJS 提供了一个很棒的方式来创建单页app。正是由于这个原因，使得我们的站点看起来更像是一个原生的手机程序。为了使它看起来更像是原生的程序，我们可以使用 ngAnimate module 为它添加过渡和动画效果。
这个模块可以使我们创建漂亮的程序。今天，我们将要看一下如何为 ng-view 添加动画效果。
我们要构建什么
我们假设我们有一个单页面的程序，并且想为这个页面添加动画效果。点击某一个链接会将一个试图滑出，同时将另一个试图滑入。
我们将会使用：
&&& 使用 ngRoute 来为我们的页面路由
&&& 使用 ngAnimate 来为页面创建动画效果
&&& 对页面使用 CSS Animations
&&& 当我们离开或进入试图时，我们的每一个页面会有不同的动画效果
Extreme Animations: 我们在这里使用的动画效果就是上面提到的这些。精巧的动画效果可以为你的站点增色不少，仅仅是demo页面就足够令我们为之疯狂了。*动画效果来自于Codrops上的
它如何工作？
让我们看一下ngAnimate是如何工作的。ngAnimate 会根据是进入还是离开视图来为不同的Angular 指令(directive)添加和移除不同的CSS类名。例如，当我们加载网站时，无论ng-view中填充了什么都会得到一个.ng-enter的类名。
我们所需要做的就是给.ng-enter 类名添加CSS动画效果，该动画在进入的时候会自动生效。
ngAnimate 可以应用于: ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView 以及 ngClass
一定要查看
来了解ngAnimate更多的功能。接下来，让我们在实际应用中了解一下。
开始我们的程序
以下使我们需要的文件：
- index.html
- style.css
- page-home.html
- page-about.html
- page-contact.html
让我们从 index.html 开始，我们将会加载 AngularJS, 以及 。对了，不要忘了使用来定义样式。
&!-- index.html --&
&!DOCTYPE html&
&!-- CSS --&
&!-- load bootstrap (bootswatch version) --&
&link rel="stylesheet" href="///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="/ajax/libs/angularjs/1.2.13/angular-route.js"&&/script&
&script src="/ajax/libs/angularjs/1.2.13/angular-animate.js"&&/script&
&script src="app.js"&&/script&
&!-- 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&
以上就是我们非常简单的HTML文件。加载我们需要的资源，定义我们的Angular app，并且为我们注入的视图添加ng-view类名。
让我们看一下我们所需要的其他的一些文件：
- index.html
- style.css
- page-home.html
- page-about.html
- page-contact.html
我们的 Angular 程序 app.js
现在，我们需要将会创建一个带路由的Angular程序，以便我们可以在不刷新页面的情况下修改我们的页面。
// 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';
现在，我们创建了我们的程序、路由以及控制器。
每一个控制器都有一个它自己的pageClass变量。改变了的值会被添加到index.html文件中的ng-view中，这样我们的每一个页面都有了不同的类名。通过这些不同的类名，我们可以为不同的页面添加不同的动画效果。
视图 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&
现在，我们拥有了我们的页面，通过使用Angular的路由功能可以将这些页面注入到我们的主index.html文件中。
现在，所有的乏味的工作已经完成。我们的程序应该可以正常工作，并且可以很好的修改页面。接下来，让我们进入下一步，为页面添加动画效果！
为App添加动画效果 style.css
我们将使用CSS来添加所有的动画效果。这种方法很棒，因为我们所要做的事就是添加ngAnimate，并且不用修改我们的代码就可以添加CSS动画效果。
ngAnimate为我们的ng-view添加的两个类分别是.ng-enter和.ng-leave。你可以想象一些他们各自的作用。
为了使我们的程序看起来不那么乏味，我们将会添加一些基础的样式。
/* make our pages be full width and full height */
/* positioned absolutely so that the pages can overlap each other as they enter and leave */
padding-top:200
text-align:
width:100%;
{ font-size:60 }
{ margin-top:50 }
/* PAGES (specific colors for each page)
============================================================================= */
.page-home
{ background:#00D0BC; color:#00907c; }
.page-about
{ background:#E59400; color:#a55400; }
.page-contact
{ background:#ffa6 color:#9e0000; }
通过以上的代码，我们为3个页面添加了基础的样式。当我们点击程序的时候，我们可以看到它们应用了不同的颜色和间距。
让我们定义我们的动画效果，之后我们将会了解一下当页面进入或离开的时候我们怎么才能为不同的页面应用不用的动画效果。
Vendor Prefixes: 我们将会使用默认的CSS属性，不带任何前缀的。会包含所有的前缀。
我们定义了6个不同的动画效果。每一个页面都会有他们各自的ng-enter 和 ng-leave 的动画效果。
/* style.css */
/* ANIMATIONS
============================================================================= */
/* leaving animations ----------------------------------------- */
/* rotate and fall */
@keyframes rotateFall {
{ transform: rotateZ(0deg); }
{ transform: rotateZ(10deg); animation-timing-function: ease- }
{ transform: rotateZ(17deg); }
{ transform: rotateZ(16deg); }
{ transform: translateY(100%) rotateZ(17deg); }
/* slide in from the bottom */
@keyframes slideOutLeft {
{ transform: translateX(-100%); }
/* rotate out newspaper */
@keyframes rotateOutNewspaper {
{ transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
/* entering animations --------------------------------------- */
/* scale up */
@keyframes scaleUp {
{ opacity: 0.3; -webkit-transform: scale(0.8); }
/* slide in from the right */
@keyframes slideInRight {
{ transform:translateX(100%); }
{ transform: translateX(0); }
/* slide in from the bottom */
@keyframes slideInUp {
{ transform:translateY(100%); }
{ transform: translateY(0); }
结合以上我们所定义的动画效果，我们将会把它们应用到我们的页面上。
进入和离开动画效果
我们只需要将这些动画效果应用给.ng-enter 或 .ng-leave就可以为我们的页面添加不用的动画效果。
/* style.css */
{ animation: scaleUp 0.5s both ease- z-index: 8888; }
{ animation: slideOutLeft 0.5s both ease- z-index: 9999; }
现在，我们的程序就会有像上面那样的动画效果了。当离开的时候，页面会向左滑出，当进入的时候会放大。我们还添加了z-index属性，以便离开的页面会处于进入的页面的上层。
让我们看一下如何为具体的页面创建动画。
具体页面的动画效果
我们为不同的页面创建了各自的Angular 控制器。在这些控制器里面，我们添加了一个pageClass并且将它添加到我们的&div ng-view&中。我们将会使用这些类名来引出具体的页面。
不像上面的.ng-enter 和 .ng-leave那样，我们使它们更加具体化。
{ z-index: 8888; }
{ z-index: 9999; }
/* page specific animations ------------------------ */
/* home -------------------------- */
.page-home.ng-enter
{ animation: scaleUp 0.5s both ease- }
.page-home.ng-leave
{ transform-origin: 0% 0%; animation: rotateFall 1s both ease- }
/* about ------------------------ */
.page-about.ng-enter
{ animation:slideInRight 0.5s both ease- }
.page-about.ng-leave
{ animation:slideOutLeft 0.5s both ease- }
/* contact ---------------------- */
.page-contact.ng-leave
{ transform-origin: 50% 50%; animation: rotateOutNewspaper .5s both ease- }
.page-contact.ng-enter
{ animation:slideInUp 0.5s both ease- }
现在，每一个页面都有它各自唯一的进入和离开的动画效果。
为我们的Angular程序添加动画效果是相当容易的。你所需要做的就是加载ngAnimate并创建你的CSS动画效果。真诚的希望这篇文章可以帮助你了解一些使用ng-view时的一些比较酷的动画效果。
View Code : http://plnkr.co/edit/uW4v9T?p=info
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具AngularJS 应用中实现 JavaScript 动画效果 - 技术翻译 - 开源中国社区
当前访客身份：游客 [
已有文章 2440 篇
当前位置：
AngularJS 应用中实现 JavaScript 动画效果
英文原文：
0人收藏此文章,
推荐于 2年前 (共 9 段, 翻译完成于 08-25) ()
参与翻译(3人)：
&是一组用于创建单页Web应用的丰富框架，给构建丰富交互地应用带来了所有需要的功能。其中一项主要的特性就是Angular带来了对的支持。
我们能够在应用的部分内容当中使用动画来表明一些变化正在发生。在我当中，我讲到了在Angular应用中对CSS动画的支持。在这篇文章当中，我们会看到怎样利用JavaScript脚本在AngularJS应用当中生成动画效果。
&翻译的不错哦!
在Angular当中，CSS和JavaScript之间唯一的区别就是它们的定义。没有什么区别妨碍到被定义的动画被使用。首先，我们需要加载ngAnimate模块到我们应用的root模块当中。
angular.module('coursesApp',&['ngAnimate']);
而所有将被处理的JavaScript动画事件依然保持不变。以下是一个直接支持的动画列表和它们对应的不同行为：
指令事件集
ng-include
以上列表和上一篇文章一样，但没有提到相应的CSS类，因为我们不需要用到它们来定义JavaScript动画。所有这些事件只有在应用模块加载了ngAnimate模块后才会产生。现在让我们看一看如何让这些指令动起来。
&翻译的不错哦!
自定义Angular动画的语法
以下是一个自定义JavaScript动画基本的框架：
angular.module('coursesApp').animation('.name-of-animation',&function(&injectables&)&{
&&return&{
&&&&event:&function(elem,&done){
&&&&&&//logic&of&animation
&&&&&&done();
这是有一些在AngularJS中写JavaScript动画时需要记住的要点：
动画的名字以点（.）开头
所有动画行为接受两个参数：
在当前即将运行动画的DOM元素中的一个对象，要么是在jQuery没有赶在AngularJS加载之前进行加载的一个，要么是一个jQuery对象。
一个动画结束时的回调函数。指令对应的行为动作被暂停，直到回调函数被调用。
我们有若干的JavaScript库，像jQuery、Greensock、Anima和其它几个让编写动画变得容易的库。为了保持简洁，我正在这篇文章中使用jQuery来创建动画。为了学习其它几个库，你可以访问它们对应的网站。
&翻译的不错哦!
让ng-view动起来
在一个ng-view指令上使用的动画在切换AngularJS应用的视图时运行。
以下是一块视图正在出现时，动画所引起的视觉效果：
courseAppAnimations.animation('.view-slide-in',&function&()&{
&&return&{
&&&&enter:&function(element,&done)&{
&&&&&&element.css({
&&&&&&&&opacity:&0.5,
&&&&&&&&position:&"relative",
&&&&&&&&top:&"10px",
&&&&&&&&left:&"20px"
&&&&&&.animate({
&&&&&&&&top:&0,
&&&&&&&&left:&0,
&&&&&&&&opacity:&1
&&&&&&&&},&1000,&done);
以上创建了一个视图进入画面时的滑入效果。其中done方法被做为回调函数传入。这是为了表明动画已经结束，并且现在AngularJS框架可以继续下一个动作。
注意animate()方法被调用的方法。我们不必将这个元素转换成一个jQuery对象，因为jQuery在加载AngularJS前已经加载。
现在我们需要应用这个动画效果到ng-view指令上。尽管这个动画是在JavaScript里定义的，按照约定我们使用一个class标记来将它应用到目标指令上。
&div&ng-view&class="view-slide-in"&&/div&
&翻译的不错哦!
ng-repeat 动画
在你可以选择使用的指令里面，ng-repeat是一个非常重要的指令。还有两个基本的操作指令是过滤和排序。根据执行的操作添加，移动，或者移除相应的指令。
下面演示使用一些基本的动画，当发生变化的时候你就可以看到相应的动画效果。
courseAppAnimations.animation('.repeat-animation',&function&()&{
&&return&{
&&&&enter&:&function(element,&done)&{
&&&&&&console.log("entering...");
&&&&&&var&width&=&element.width();
&&&&&&element.css({
&&&&&&&&position:&'relative',
&&&&&&&&left:&-10,
&&&&&&&&opacity:&0
&&&&&&element.animate({
&&&&&&&&left:&0,
&&&&&&&&opacity:&1
&&&&&&},&done);
&&&&leave&:&function(element,&done)&{
&&&&&&element.css({
&&&&&&&&position:&'relative',
&&&&&&&&left:&0,
&&&&&&&&opacity:&1
&&&&&&element.animate({
&&&&&&&&left:&-10,
&&&&&&&&opacity:&0
&&&&&&},&done);
&&&&move&:&function(element,&done)&{
&&&&&&element.css({
&&&&&&&&left:&"2px",
&&&&&&&&opacity:&0.5
&&&&&&element.animate({
&&&&&&&&left:&"0px",
&&&&&&&&opacity:&1
&&&&&&},&done);
&翻译的不错哦!
Ng-hide动画
ng-hide指令用于添加或移除目标元素的ng-hide样式类。 为了使用某个动画，我们经常需要添加或移除css样式。 将类名传递给动画处理类来实现这个效果。 这可以让我们检查这个类，对代码进行适当的修改。
下面是一个动画的示例代码，用ng-hide指令实现元素的渐隐渐显效果：
courseAppAnimations.animation('.hide-animation',&function&()&{
&&return&{
&&&&beforeAddClass&:&function(element,&className,&done)&{
&&&&&&if&(className&===&'ng-hide')&{
&&&&&&&&element.animate({
&&&&&&&&&&opacity:&0
&&&&&&&&},500,&done);
&&&&&&}&else&{
&&&&&&&&done();
&&&&removeClass&:&function(element,&className,&done)&{
&&&&&&if&(className&===&'ng-hide')&{
&&&&&&element.css('opacity',0);
&&&&&&element.animate({
&&&&&&&&&&opacity:&1
&&&&&&&&},&500,&done);
&&&&&&}&else&{
&&&&&&&&done();
&翻译的不错哦!
让自定义指令动起来
为了让自定义指令产生动画效果，我们需要用到&这个服务。尽管$animate服务 是AngularJS核心框架的一部分，也需要加载ngAnimate后才能让这个服务发挥最大的作用。
使用，我们将展现一页课程列表。我们创建一条指令来显示格子中课程的细节内容，并且格子中的内容会在点击"View Statistics"这个链接时改变。让我们添加一种动画来把这个转换效果呈现给用户。
当转换动画开始的时候，我们将添加一个CSS类标记，结束时，移去这个类标记。以下是针对这个指令的示例代码：
app.directive('courseDetails',&function&($animate)&{
&&&&&&return&{
&&&&&&&&scope:&true,
&&&&&&&&templateUrl:&'courseDetails.html',
&&&&&&&&link:&function&(scope,&elem,&attrs)&{
&&&&&&&&&&scope.viewDetails&=&
&&&&&&&&&&elem.find('button').bind('click',&function&()&{
&&&&&&&&&&&&$animate.addClass(elem,&"switching",&function&()&{
&&&&&&&&&&&&&&elem.removeClass("switching");
&&&&&&&&&&&&&&scope.viewDetails&=!&scope.viewD
&&&&&&&&&&&&&&scope.$apply();
&&&&&&&&});
&翻译的不错哦!
正如你所看到的，我们在动画结束时执行这个动作。在浏览器的开发者工具中，我们会在查看指令元素时发现switching-active和switching-add这两个类标记正被很快的添加随后被移除。我们可以通过定义一个CSS转换样式或者一个自定义的JavaScript动画来查看动画的效果。以下就是一个简单地CSS转换样式，可以被用于上面提到的指令，为了简洁性我们移去了特定的前缀：
.det-anim.switching&{
&&transition:&all&1s&
&&position:&
&&opacity:&0.5;
&&left:&-20
又或者，这里有一个jQuery写的动画，可以用于同样的指令：
courseAppAnimations.animation('.js-anim',&function&()&{
&&return&{
&&&&beforeAddClass:&function(element,&className,&done)&{
&&&&&&if&(className&===&'switching')&{
&&&&&&&&element.animate({
&&&&&&&&&&opacity:&0
&&&&&&&&},1000,&function&(){
&&&&&&&&&&element.css({
&&&&&&&&&&&&opacity:&1
&&&&&&&&&&});
&&&&&&&&&&done();
&&&&&&&&});
&&&&&&else&{
&&&&&&&&done();
这些动画当中，如果它可以应用于内建的指令上，它同样也可以被应用到自定义的指令上：
&div&course-details&
&&&&&class="det-anim"
&&&&&title="{{course.title}}"&
你可以在看到以上所有的动画运行时的效果。
&翻译的不错哦!
动画，当被适合并正常的运用时，将给应用程序带来生气。正如我们所看到的，AngularJS对CSS和JavaScript动画都提供各种支持。你可以根据团队的情况来挑选其中一种。
但是，使用太多的动画将会使得应用程序变得缓慢，而对于用户来，这将使应用程序看起来i不够人性化。所以，必须小心并最优化的使用这件利器。
&翻译的不错哦!