AngularJS 实现JavaScript 动画效果详解  更新时间:2016年09月08日 15:16:20   投稿:lqh   本文主要介绍AngularJS 实现 JavaScript 动画的资料,这里整理了详细的资料和简单示例代码,有兴趣的小伙伴可以参考下 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() { 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(); } } } }); 这些动画当中,如果它可以应用于内建的指令上,它同样也可以被应用到自定义的指令上: 你可以在示例页面看到以上所有的动画运行时的效果。 结论 动画,当被适合并正常的运用时,将给应用程序带来生气。正如我们所看到的,AngularJS对CSS和JavaScript动画都提供各种支持。你可以根据团队的情况来挑选其中一种。 但是,使用太多的动画将会使得应用程序变得缓慢,而对于用户来,这将使应用程序看起来i不够人性化。所以,必须小心并最优化的使用这件利器。  您可能感兴趣的文章: angular4 如何在全局设置路由跳转动画的方法 Angular4如何自定义首屏的加载动画详解 在AngularJS应用中实现一些动画效果的代码 AngularJS中实现显示或隐藏动画效果的方式总结 给angular加上动画效遇到的问题总结 AngularJS中实现动画效果的方法 基于Angular.js实现的触摸滑动动画实例代码 使用Angular 6创建各种动画效果的方法 AngularJS入门之动画 Angular4.0动画操作实例详解 AngularJS JavaScript 动画 相关文章 Angular请求防抖处理第一次请求失效问题 这篇文章主要介绍了angular请求防抖及处理第一次请求失效的相关资料,需要的朋友可以参考下 2019-05-05 详解Angular中的自定义服务Service、Provider以及Factory 本篇文章主要介绍了详解Angular中的自定义服务Service、Provider以及Factory,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-04-04 Angular服务Request异步请求的实例讲解 今天小编就为大家分享一篇Angular服务Request异步请求的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-08-08 Angularjs中date过滤器失效的问题及解决方法 这篇文章主要介绍了Angularjs中date过滤器失效的问题及解决方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 2018-07-07 AngularJS中$http使用的简单介绍 在AngularJS中主要使用$http服务与远程http服务器交互,本篇文章主要介绍了AngularJS中$http使用的简单介绍,非常具有实用价值,需要的朋友可以参考下。 2017-03-03 基于AngularJS实现iOS8自带的计算器 这篇文章的主要内容是使用angularjs实现一个计算器,是一个仿iOS8风格的计算器,功能基本和iOS自带的计算器是一致的。有需要的朋友们可以参考借鉴。 2016-09-09 angular中使用Socket.io实例代码 本篇文章主要介绍了angular中使用Socket.io实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-06-06 Angular4的输入属性与输出属性实例详解 这篇文章主要介绍了Angular4的输入属性与输出属性,结合实例形式详细分析了Angular4输入属性与输出属性的概念、功能及相关使用技巧,需要的朋友可以参考下 2017-11-11 Angular4如何自定义首屏的加载动画详解 Angular应用程序在首次加载根组件时会在浏览器的显示一个loading…动画,下面这篇文章主要给大家介绍了关于Angular4如何自定义首屏加载动画的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编来一起看看吧。 2017-07-07 angular.js实现列表orderby排序的方法 今天小编就为大家分享一篇angular.js实现列表orderby排序的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10 最新评论

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不够人性化。所以,必须小心并最优化的使用这件利器。 

您可能感兴趣的文章:

  • angular4 如何在全局设置路由跳转动画的方法
  • Angular4如何自定义首屏的加载动画详解
  • 在AngularJS应用中实现一些动画效果的代码
  • AngularJS中实现显示或隐藏动画效果的方式总结
  • 给angular加上动画效遇到的问题总结
  • AngularJS中实现动画效果的方法
  • 基于Angular.js实现的触摸滑动动画实例代码
  • 使用Angular 6创建各种动画效果的方法
  • AngularJS入门之动画
  • Angular4.0动画操作实例详解
张贴在3