AngularJS 实现JavaScript 动画效果详解


Posted in Javascript onSeptember 08, 2016

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指令实现元素的渐隐渐显效果:

 

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 = 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 
  class="det-anim"
  title="{{course.title}}">
</div>

你可以在示例页面看到以上所有的动画运行时的效果。

结论

动画,当被适合并正常的运用时,将给应用程序带来生气。正如我们所看到的,AngularJS对CSS和JavaScript动画都提供各种支持。你可以根据团队的情况来挑选其中一种。

但是,使用太多的动画将会使得应用程序变得缓慢,而对于用户来,这将使应用程序看起来i不够人性化。所以,必须小心并最优化的使用这件利器。 

Javascript 相关文章推荐
JS 文字符串转换unicode编码函数
May 30 Javascript
javascript 框架小结 个人工作经验
Jun 13 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 Javascript
Node.js进阶之核心模块https入门
May 23 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 Javascript
vue 限制input只能输入正数的操作
Aug 05 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 #Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 #Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 #Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 #Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 #Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 #Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 #Javascript
You might like
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
发挥语言的威力--融合PHP与ASP
2006/10/09 PHP
discuz Passport 通行证 整合笔记
2008/06/30 PHP
php class中self,parent,this的区别以及实例介绍
2013/04/24 PHP
php无限遍历目录示例
2014/02/21 PHP
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
EasyUI创建人员树的实例代码
2017/09/15 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
[01:33:30]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第二场 2月5日
2021/03/11 DOTA
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
Python 3 判断2个字典相同
2019/08/06 Python
Python接口自动化测试的实现
2020/08/28 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
Python 多进程、多线程效率对比
2020/11/19 Python
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
Delphi软件工程师试题
2013/01/29 面试题
大学生职业生涯规划范文
2013/12/31 职场文书
企业安全生产标语
2014/06/06 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle