博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AngularJs $animate 让页面动起来
阅读量:5878 次
发布时间:2019-06-19

本文共 1775 字,大约阅读时间需要 5 分钟。

$animate

$animate服务提供了基本的DOM操作功能如在DOM里插入、移除和移动元素,以及添加和删除类。这个服务是ngAnimate的核心服务,为CSS和Javascript提供了高档次的动画。

$animate在Angular核心都是有效的,无论如何,这个服务为了支持所有动画须包含ngAnimate模块。否则,$animate只能做简单的DOM操作。

方法

enter(element,parent,after,[done]);

在DOM中,将一个元素插入到元素后面或作为第一个子元素插入父元素。一旦完成,done()将会被回调(如果done()存在)。

element:被插入到DOM的元素。

parent:将会被插入子元素的父元素。(如果下一个元素不存在)。

after:后面插入元素的兄弟元素。

done:当元素被插入DOM后执行的回调函数。

leave(element,[done]);

从DOM中移除元素。一旦完成,done()将会被调用(如果done()存在)。

element:将会被从DOM中移除的元素。

done:当元素被从DOM删除后执行的回调函数。

move(element,parent,after,[done]);

将提供的元素在DOM中移动位置,在父元素的内部或者兄弟元素之间。一旦完成,该done()将会被回调(如果done()存在)

element:在DOM中被移动的元素。

parent:将会被插入子元素的父元素。(如果下一个元素不存在)。

after:后面被放置元素的兄弟元素。

done:当元素在DOM中被移动后执行的回调函数。

addClass(element,className,[done]);

给提供的元素添加提供的CSS类名。一旦完成,done()将会被调用(如果done()存在)。

element:将会被添加class名称的元素。

className:将会被提供的css类。

done:当css类被添加到元素中后执行的回调函数。

removeClass(element,className,[done]);

给提供的元素移除提供的CSS类名。一旦完成,done()将会被调用(如果done()存在)。

element:将会被移除class名称的元素。

className:将会被移除的css类。

done:当css类被从元素中移除后执行的回调函数。

setClass(element,add,remove,[done]);

在元素中添加或者移除给定的css类名。一旦完成,done()将会被调用(如果done()存在)。

element:被设置CSS类的元素。

add:将会被添加到元素的CSS类。

remove:将会从元素上移除的CSS类。

done:当元素中的css类被设置后执行的回调函数。

实现animate动画代码1:

  
$animate

实现animate动画代码2:

  
$animate

Test List

实现animate动画代码3:

  
$animate

Test List

更多效果,可在google搜"$animate",百度资料太少了额,质量也不行...

转载地址:http://bjdix.baihongyu.com/

你可能感兴趣的文章
.Net 通过MySQLDriverCS操作MySQL
查看>>
JS Cookie
查看>>
ubuntu Unable to locate package sysv-rc-conf
查看>>
笔记:认识.NET平台
查看>>
cocos2d中CCAnimation的使用(cocos2d 1.0以上版本)
查看>>
【吉光片羽】短信验证
查看>>
MacBook如何用Parallels Desktop安装windows7/8
查看>>
gitlab 完整部署实例
查看>>
GNS关于IPS&ASA&PIX&Junos的配置
查看>>
七天学会ASP.NET MVC (四)——用户授权认证问题
查看>>
upgrade to iOS7,how to remove stroyboard?
查看>>
影响企业信息化成败的几点因素
查看>>
SCCM 2016 配置管理系列(Part8)
查看>>
zabbix监控部署
查看>>
struts中的xwork源码下载地址
查看>>
Android硬件抽象层(HAL)深入剖析(二)
查看>>
CDays–4 习题一至四及相关内容解析。
查看>>
L3.十一.匿名函数和map方法
查看>>
java面向对象高级分层实例_实体类
查看>>
android aapt 用法 -- ApkReader
查看>>