在AngularJS应用中实现一些动画效果的代码

在Angular当中，CSS和JavaScript之间唯一的区别就是它们的定义。没有什么区别妨碍到被定义的动画被使用。首先，我们需要加载ngAnimate模块到我们应用的root模块当中。
 

angular.module('coursesApp', ['ngAnimate']);

而所有将被处理的JavaScript动画事件依然保持不变。以下是一个直接支持的动画列表和它们对应的不同行为：

指令事件集

以上列表和上一篇文章一样，但没有提到相应的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动画时需要记住的要点：

我们有若干的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标记来将它应用到目标指令上。