ngAnimate模块

ngAnimate模块和ngRoute一样,不属于核心模块,都是需要script引入,然后在模块内依赖注入
那ngAnimate做了什么?
ngAnimate 模型可以添加或移除 class 。
ngAnimate 模型并不能使 HTML 元素产生动画,但是 ngAnimate 会监测事件,类似隐藏显示 HTML 元素 ,如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。
支持的指令:
指令    支持动画
ngRepeat    enter, leave and move
ngView    enter and leave
ngInclude    enter and leave
ngSwitch    enter and leave
ngIf    enter and leave
ngClass    add and remove
ngShow & ngHide    add and remove (the ng-hide class value)
form    add and remove (dirty, pristine, valid, invalid & all other validations)
ngModel    add and remove (dirty, pristine, valid, invalid & all other validations)
那么,怎么使用呢? 本文拿ng-repeat这个指令来做个介绍,其他的一些指令使用方式几乎相同,可类推。
ng-repeat 主要是对一个list的展示,这些元素是是被创建出来加入到DOM结构中去的,那么,它的动画过程为:
[javascript] view plain copy
<span style="font-family:Microsoft YaHei;font-size:14px;">创建元素 -> .ng-enter -> .ng-enter-active -> 完成,呈默认状态
默认状态 -> .ng-leave -> .ng-leave-active -> 销毁元素</span>
ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。
其他指令会在进入 DOM 会添加 ng-enter 类,移除 DOM 会添加 ng-leave 属性。
当 HTML 元素位置改变时,ng-repeat 指令同样可以添加 ng-move 类 。
此外, 在动画完成后,HTML 元素的类集合将被移除。例如:
ng-hide 指令会添加一下类:
ng-animate ng-hide-animate ng-hide-add (如果元素将被隐藏) ng-hide-remove (如果元素将显示) ng-hide-add-active (如果元素将隐藏) ng-hide-remove-active (如果元素将显示)
这样的效果是对所有元素同时应用,可能实际运用中需要有一个先后的渐变出现的效果,这时候可以设置ng-enter-stagger里面的transition-delay的样式时间。
具体情况还需要我们自己去实践。
参考:http://www.open-open.com/lib/view/open1437529447443.html
时间: 2024-08-01 05:29:26

ngAnimate模块的相关文章

AngularJS--ngAnimate模块

1.ngRoute模块的使用 使用步骤: (1)创建index.html,引入css/js,声明ngView (2)创建模板页面 (3)创建模块,配置路由字典 module.config(function($routeProvider){ $routeProvider. when('/start', {templateUrl: 'xxx.html'}) }) (4)测试:  http://IP/index.html#/start 2.ngAnimate模块的使用 Angular本身没有提供任何动

野兽的Angular Api 学习、翻译及理解 - - $animate

野兽的ng api学习 -- $animate $animate $animate服务提供了基本的DOM操作功能如在DOM里插入.移除和移动元素,以及添加和删除类.这个服务是ngAnimate的核心服务,为CSS和Javascript提供了高档次的动画. $animate在Angular核心都是有效的,无论如何,这个服务为了支持所有动画须包含ngAnimate模块.否则,$animate只能做简单的DOM操作. 方法: enter(element,parent,after,[done]); 在D

学习笔记-AngularJs(九)

到目前为止,我们所做的学习案例都是没有加任何动画效果的,对于以往来说,我们经常会去使用一些动画插件或是css框架(如:animate.css)来点缀我们的网页,这样显得生动,高大上,那么接下来我们可以学习一下,怎么在AngularJs下来实现叼酷炫的动画操作,主要使用的命令是ngAnimate. 与之前的ngResource,ngRoute一样,需要注入ngAnimate和引入ng-animate.js才可以使用此服务,想在你的angular应用程序使用ngAnimate来实现动画功能,前提条件

AngularJS实用基础知识---入门必备

前言 今天来和大家学习一下AngularJS-- AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. AngularJS 学习起来非常简单. 一.AngularJS指令与表达式 [AngularJS常用指令]1.ng-app:声明Angular所管辖的区域,一般写在body或HTML上,原则上一个页面只有一个.2.ng-model:把元素值(比如输入域的值)绑定到应用程序的变量中.eg:<input type="text"

Angular - - $animate

$animate $animate服务提供了基本的DOM操作功能如在DOM里插入.移除和移动元素,以及添加和删除类.这个服务是ngAnimate的核心服务,为CSS和Javascript提供了高档次的动画. $animate在Angular核心都是有效的,无论如何,这个服务为了支持所有动画须包含ngAnimate模块.否则,$animate只能做简单的DOM操作. 方法: enter(element,parent,after,[done]); 在DOM中,将一个元素插入到元素后面或作为第一个子元

AngularJS入门之动画

AngularJS中ngAnimate模块支持动画效果,但是ngAnimate模块并未包含在AngularJS核心库中,因此需要使用ngAnimate需要在定义Module时声明对其的引用. AngularJS中实现动画效果有两大种方式: 基于CSS的动画效果 CSS Transition Animation CSS Class-based Animation 基于Javascript的动画效果 官方给出的能支持动画效果的Directives: Directive Supported Anima

AngularJS&ndash;Animations(动画)

在AngularJS 1.3 中,给一些指令(eg:   ngRepeat,ngSwitch, ngView等)提供了一个动画的钩子,也就是说,这些指令可以使用 $animate 动画服务(是一个服务哦,可以注入到controller里面去). 这些动画钩子可以再整个指令的生命周期中随着各种指示,触发等进行动作,显示动画效果,我们可以使用HTML5的各种动画效果,类似 Transition,Keyframe,或者回调函数(这取决于是否给指令配置了动画).如果在一个factory工厂方法中,使用A

Angular - - angular.Module

angular.Module Angular模块配置接口. 方法: provider(name,providerType); name:服务名称. providerType:创建一个服务的实例的构造函数. factory(name,providerFunction); name:服务名称. providerFunction:创建服务的实例的函数. service(name,constructor); name:服务名称. constructor:一个将被实例化的构造函数. value(name,

[Angular Tutorial] 14 -Animations

在这一步中,我们将会通过在我们先前创建的模板代码中添加CSS和JavaScript动画效果来扩展我们的web应用. ·我们现在使用ngAnimate模块来允许动画效果贯穿整个应用. ·我们也依赖于自带的指令来自动触发动画来进行开发. ·当一个动画效果被发现时,在给定的时间内,它将会和置于元素中的实际DOM操作一同运行(比如:在ngRepeat中插入/删除节点或在ngClass中添加/删除类). 最大的不同列举如下,您可以点击这里在GitHub上查看全部的不同. CSS过渡动画:使ngRepeat