AngularJS 应用中实现 JavaScript 动画效果
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指令实现元素的渐隐渐显效果: