位置: 编程技术 - 正文

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

编辑:rootadmin

推荐整理分享在AngularJS应用中实现一些动画效果的代码(angularjs2),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:angular使用,angularjs常用总结,angularjs常用总结,angular 引入js,angular jsx,angular jsx,angular jsx,angularjs常用总结,内容如对您有帮助,希望把文章链接给更多的朋友!

在Angular当中,CSS和JavaScript之间唯一的区别就是它们的定义。没有什么区别妨碍到被定义的动画被使用。首先,我们需要加载ngAnimate模块到我们应用的root模块当中。

而所有将被处理的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动画基本的框架:

这是有一些在AngularJS中写JavaScript动画时需要记住的要点:

动画的名字以点(.)开头 所有动画行为接受两个参数: 在当前即将运行动画的DOM元素中的一个对象,要么是在jQuery没有赶在AngularJS加载之前进行加载的一个jQlite对象,要么是一个jQuery对象。 一个动画结束时的回调函数。指令对应的行为动作被暂停,直到回调函数被调用。

我们有若干的JavaScript库,像jQuery、Greensock、Anima和其它几个让编写动画变得容易的库。为了保持简洁,我正在这篇文章中使用jQuery来创建动画。为了学习其它几个库,你可以访问它们对应的网站。 让ng-view动起来

在一个ng-view指令上使用的动画在切换AngularJS应用的视图时运行。

以下是一块视图正在出现时,动画所引起的视觉效果:

以上创建了一个视图进入画面时的滑入效果。其中done方法被做为回调函数传入。这是为了表明动画已经结束,并且现在AngularJS框架可以继续下一个动作。

注意animate()方法被调用的方法。我们不必将这个元素转换成一个jQuery对象,因为jQuery在加载AngularJS前已经加载。

现在我们需要应用这个动画效果到ng-view指令上。尽管这个动画是在JavaScript里定义的,按照约定我们使用一个class标记来将它应用到目标指令上。

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

ng-repeat 动画在你可以选择使用的指令里面,ng-repeat是一个非常重要的指令。还有两个基本的操作指令是过滤和排序。根据执行的操作添加,移动,或者移除相应的指令。下面演示使用一些基本的动画,当发生变化的时候你就可以看到相应的动画效果。

Ng-hide动画

ng-hide指令用于添加或移除目标元素的ng-hide样式类。 为了使用某个动画,我们经常需要添加或移除css样式。 将类名传递给动画处理类来实现这个效果。 这可以让我们检查这个类,对代码进行适当的修改。

下面是一个动画的示例代码,用ng-hide指令实现元素的渐隐渐显效果:

让自定义指令动起来

为了让自定义指令产生动画效果,我们需要用到$animate 这个服务。尽管$animate服务 是AngularJS核心框架的一部分,也需要加载ngAnimate后才能让这个服务发挥最大的作用。

使用上一篇文章中同样的例子,我们将展现一页课程列表。我们创建一条指令来显示格子中课程的细节内容,并且格子中的内容会在点击"View Statistics"这个链接时改变。让我们添加一种动画来把这个转换效果呈现给用户。

当转换动画开始的时候,我们将添加一个CSS类标记,结束时,移去这个类标记。以下是针对这个指令的示例代码:

正如你所看到的,我们在动画结束时执行这个动作。在浏览器的开发者工具中,我们会在查看指令元素时发现switching-active和switching-add这两个类标记正被很快的添加随后被移除。我们可以通过定义一个CSS转换样式或者一个自定义的JavaScript动画来查看动画的效果。以下就是一个简单地CSS转换样式,可以被用于上面提到的指令,为了简洁性我们移去了特定的前缀:

又或者,这里有一个jQuery写的动画,可以用于同样的指令:

这些动画当中,如果它可以应用于内建的指令上,它同样也可以被应用到自定义的指令上:

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

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

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

3个可以改善用户体验的AngularJS指令介绍 1.头像图片为了在你的应用中展示头像图片,你需要使用用户的电子邮件地址,将地址转换为小写并使用md5加密该字符串。所以聪明的做法是使用指令来

深入讲解AngularJS中的自定义指令的使用 AngularJS的自定义指令,就是你自己的指令,加上编译器编译DOM时运行的原生核心函数。这可能很难理解。现在,假设我们想在应用中不同页面复用一些

使用Chrome浏览器调试AngularJS应用的方法 当我们构建AngularJS应用时,通过浏览器(如Chrome,Firefox和IE)的JavaScript控制台访问应用中隐藏的数据和服务总会有些困难。下面是一些简单的技巧可以

标签: angularjs2

本文链接地址:https://www.jiuchutong.com/biancheng/380431.html 转载请保留说明!

上一篇:详解AngularJS的通信机制(angularjs2)

下一篇:3个可以改善用户体验的AngularJS指令介绍(有没有改善)

  • 外购产品视同自产产品办理免抵退税的条件?
  • 进项税额转出就是要多交税吗
  • 出口退税新政策报关费发票要怎么开
  • 股权置换税收
  • 大盛房地产中介公司
  • 单位参加社保必须全员全额申报吗
  • 去年的亏损今年第一季度可以弥补吗
  • 写字楼注册公司对面积有要求吗
  • 股权转让后的实收资本怎么做账
  • 固定资产累计折旧完了怎么办
  • 公司购买汽车保险车船税需要另计吗
  • 公司注销税务需要交多少钱
  • 所有的进项税都在借方吗
  • 建筑工程伙食费包括什么
  • 上海2018房产税实施细则
  • 自产自销税点
  • 董事监事的报酬包括哪些
  • 直接收费金融服务、提供贷款服务和金融商品转让税率
  • 结转实物发放的成本分录
  • 证券公司手续费怎么收
  • 税务局增项
  • 没有购销合同怎么申报印花税
  • 道路工程施工机械
  • 利润分配财务处理
  • 以前年度的财务报表还可以找出来吗
  • mac安装软件提示身份不明
  • 企业如何选择会计师事务所
  • 提升一下网速
  • win10永久激活2021
  • 建筑工程增值税税率是多少
  • 公积金贷款额度查询计算器
  • 引入人工智能
  • newdot.exe - newdot是什么进程 有什么用
  • 非盈利组织稳定吗
  • 库存商品的主要类型
  • 营改增项目
  • 合伙养殖需要注意什么
  • 库存盘点怎么做账
  • php忘记密码
  • 帝国cms手机端点击加载不动怎么弄
  • 利息收入的会计科目怎么做
  • 发票边缘有孔的可以撕掉吗
  • 兼职工作是单位工作吗
  • 个体工商户超过100万怎么缴税
  • 交所得税怎么记账
  • 认缴制下怎样变更法人
  • 存货出入库需要什么凭证
  • 法定盈余公积的作用
  • sqlserver批量更新存储脚本
  • sqlserver判断数字
  • 车辆维修费如何赔偿
  • 企业有哪些固定资产
  • 办理地税手续费
  • 跨月发票红冲怎么做账务处理
  • 筹建期间的利息费用计入什么科目
  • 政府补助收入总额法会计分录
  • 公司库存现金提现流程
  • 认缴的注册资金怎么做账
  • 企业研发费用怎么证明
  • 英语培训机构成人浦口区
  • mysql 5.6新特性
  • linux中yum的使用
  • 重装win7旗舰版系统教程
  • 原版windowsxp安装
  • fsa是什么文件格式
  • win8磁盘分区合并
  • win8如何设置vpn Win8如何建立VPN连接操作指南
  • perl读取文件内容到数组
  • perl-v
  • 实用的批处理
  • python 日期运算
  • websocket方法
  • js中substring和substr有区别吗
  • 浅谈python 四种数值类型(int,long,float,complex)
  • 工商电话号码客服投诉热线
  • 重庆电子税务局怎么绑定办税人员
  • 国家税务局广东省电子税务局下载
  • 深圳国税地税怎么申报
  • 江苏税务个税查询
  • 增值税发票勾选是什么意思
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设