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 相关文章推荐
JavaScript中常见陷阱小结
Apr 27 Javascript
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
js实现用户注册协议倒计时的方法
Jan 21 Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
用原生js统计文本行数的简单示例
Aug 19 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 Javascript
vue.js学习之vue-cli定制脚手架详解
Jul 02 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 Javascript
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
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
桌面中心(四)数据显示
2006/10/09 PHP
php下连接mssql2005的代码
2011/01/17 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
PHP 类与构造函数解析
2017/02/06 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
iview实现图片上传功能
2020/06/29 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
python保存字符串到文件的方法
2015/07/01 Python
Python使用爬虫猜密码
2016/02/19 Python
python发送邮件功能实现代码
2016/07/15 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
python爬取指定微信公众号文章
2018/12/20 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
学年自我鉴定范文
2013/10/01 职场文书
高中生毕业学习总结的自我评价
2013/11/14 职场文书
环境工程毕业生自荐信
2013/11/17 职场文书
物业电工岗位职责
2013/11/20 职场文书
预备党员党课思想汇报
2014/01/13 职场文书
数学国培研修感言
2014/02/13 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
公务员政审材料范文
2014/12/23 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
英文投诉信格式
2015/07/03 职场文书
浅谈Python 中的复数问题
2021/05/19 Python