标签: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-animateng-hide-animateng-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