为了让自定义指令产生动画效果，我们需要用到$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 = true; elem.find('button').bind('click', function () { $animate.addClass(elem, "switching", function () { elem.removeClass("switching"); scope.viewDetails =! scope.viewDetails; scope.$apply(); }); }); } }; });
正如你所看到的，我们在动画结束时执行这个动作。在浏览器的开发者工具中，我们会在查看指令元素时发现switching-active和switching-add这两个类标记正被很快的添加随后被移除。我们可以通过定义一个CSS转换样式或者一个自定义的JavaScript动画来查看动画的效果。以下就是一个简单地CSS转换样式，可以被用于上面提到的指令，为了简洁性我们移去了特定的前缀：
.det-anim.switching { transition: all 1s linear; position: relative; opacity: 0.5; left: -20px; }
又或者，这里有一个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 title="{{course.title}}"> </div>
你可以在示例页面看到以上所有的动画运行时的效果。
结论
动画，当被适合并正常的运用时，将给应用程序带来生气。正如我们所看到的，AngularJS对CSS和JavaScript动画都提供各种支持。你可以根据团队的情况来挑选其中一种。
但是，使用太多的动画将会使得应用程序变得缓慢，而对于用户来，这将使应用程序看起来i不够人性化。所以，必须小心并最优化的使用这件利器。
您可能感兴趣的文章: