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


Posted in Javascript onJune 18, 2015

在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动画时需要记住的要点:

  •     动画的名字以点(.)开头
  •     所有动画行为接受两个参数:
  •         在当前即将运行动画的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标记来将它应用到目标指令上。
 

<div ng-view class="view-slide-in"></div>

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 相关文章推荐
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
Nov 07 Javascript
jQuery实现切换页面过渡动画效果
Oct 29 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
JS中正则表达式要注意lastIndex属性
Aug 08 Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
使用AngularJS对路由进行安全性处理的方法
Jun 18 #Javascript
浅谈Node.js中的定时器
Jun 18 #Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 #Javascript
Node.js事件驱动
Jun 18 #Javascript
详解AngularJS的通信机制
Jun 18 #Javascript
javascript背景时钟实现方法
Jun 18 #Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 #Javascript
You might like
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
理解 JavaScript 预解析
2009/10/25 Javascript
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
js图片处理示例代码
2014/05/12 Javascript
JQUERY表单暂存功能插件分享
2016/02/23 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
vue小白入门教程
2018/04/02 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
python直接访问私有属性的简单方法
2016/07/25 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
python生成requirements.txt的两种方法
2019/09/18 Python
为什么相对PHP黑python的更少
2020/06/21 Python
python如何操作mysql
2020/08/17 Python
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
2014年应届大学生自我评价
2014/01/09 职场文书
建筑个人求职信范文
2014/01/25 职场文书
诚信承诺书范文
2014/03/27 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
工人先锋号申报材料
2014/12/29 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL