标签:htm class nbsp 小结 linear style 定义 ram 循环列表
AngularJS 提供了动画效果,可以配合 CSS 使用。
AngularJS 使用动画需要外部引入 angular-animate.js 库。
1.把ngAnimate依赖注入写入当前的myApp模块中;
ngAnimate 模型可以添加或移除 class类。
ngAnimate 模型并不能使 HTML 元素产生动画,但是 ngAnimate 会监测事件,类似隐藏显示 HTML 元素 ,如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。
AngularJS 添加/移除 class 的指令:
ng-show 移除class类为.ng-hide
的值
ng-hide 添加class类为.ng-hide
的值
ng-class 动态绑定一个或多个 CSS 类
ng-view
ng-include 包含外部的 HTML 文件
ng-repeat 循环列表
ng-if 用于在表达式为 false 时移除 HTML 元素
ng-switch 根据表达式显示或隐藏对应的部分
除了ng-show 和 ng-hide 之外,其他指令会在进入 DOM 会添加 ng-enter
类,移除 DOM 会添加 ng-leave
属性。
当 HTML 元素位置改变时,ng-repeat
指令同样可以添加 ng-move
类 。
此外, 在动画完成后,HTML 元素的类集合将被移除。
例如: ng-hide
指令会添加一下类:
ng-animate
ng-hide-animate
ng-hide-add
(如果元素将被隐藏)ng-hide-add-active
(如果元素将隐藏)ng-hide-remove
(如果元素将被显示)ng-hide-remove-active
(如果元素将显示)3.通常使用 CSS transition(过渡) 或 CSS 动画让 HTML 元素产生动画效果,
例如使用css过渡:
<style>
div {
transition: all linear 0.5s;
height: 100px;
}
.ng-hide {
height: 0;
}
</style>
例如使用css动画,更方法,都要考虑到兼容(IE10以上才支持)
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>
小结:ngAnimate在显示隐藏时,是通过类ng-hide来控制的;其他则是ng-enter
类, ng-leave
属性。现在可以百度一下其他指令的具体用法!
angularjs动画-ngAnimate--快速上手、使用
标签:htm class nbsp 小结 linear style 定义 ram 循环列表
原文地址:http://www.cnblogs.com/liangliangjiang/p/6668863.html