AngularJS 动画
2024-08-26 06:14:46
AngularJS 提供了动画效果,可以配合 CSS 使用。
AngularJS 使用动画需要引入 angular-animate.min.js 库。
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
还需在应用中使用模型 ngAnimate:
<body ng-app="ngAnimate">
示例:勾选复选框隐藏 DIV
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
width: 100%;
position: relative;
top: 0;
left: 0;
} .ng-hide {
height: 0;
width: 0;
background-color: transparent;
top:-200px;
left: 200px;
} </style>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="ngAnimate"> <h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1> <div ng-hide="myCheck"></div> </body>
</html>
如果我们应用已经设置了应用名,可以把 ngAnimate 直接添加在模型中:
<body ng-app="myApp"> <h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1> <div ng-hide="myCheck"></div> <script>
var app = angular.module('myApp', ['ngAnimate']);
</script>
ngAnimate做了什么呢?
ngAnimate 模型可以添加或移除 class 。
ngAnimate 模型并不能使 HTML 元素产生动画,但是 ngAnimate 会监测事件,类似隐藏显示 HTML 元素 ,如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。
AngularJS 添加/移除 class 的指令:
ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch
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
(如果元素将显示)
我们可以使用 CSS transition(过渡) 或 CSS 动画让 HTML 元素产生动画效果。如:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide {
height: 0;
}
</style>
CSS 动画允许你平滑的修改 CSS 属性值:
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>
最新文章
- Struts2 源码分析——Result类实例
- plain framework 1 版本更新 1.0.2 增加打包插件
- Unit04 - 继承的意义(下) 、 访问控制 、 static和final
- string 类的实现
- 我的第二个app上线:术购管家
- OpenStack 多台计算节点时的问题
- ubuntu12.04 安装配置jdk1.7
- 搭建 hexo,在执行 hexo deploy 后,出现 error deployer not found:github 的错误
- DataTemplate和ControlTemplate的关系
- 10.20_web编辑器复制粘贴图片
- js相关小实例——div实现下拉菜单
- struts2 --xml配置
- Html5使用canvas作图
- change safari user agent
- [转]iOS 中几种定时器 - 控制了时间,就控制了一切
- dict使用
- Stiring公式证明
- Spring之AOP实现原理
- css笔记 - 张鑫旭css课程笔记之 margin 篇
- Java并发包中CyclicBarrier的源码分析和使用