首页 > 代码库 > angular 动画
angular 动画
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
(如果元素将显示)
补充:css3过渡:
过渡属性
下表列出了所有的过渡属性:
属性 | 描述 | CSS |
---|---|---|
transition | 简写属性,用于在一个属性中设置四个过渡属性。 | 3 |
transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
transition-delay | 规定过渡效果何时开始。默认是 0。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
</style>
</head>
<body>
<p><b>注意:</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
<div>鼠标移动到 div 元素上,查看过渡效果。</div>
</body>
</html>
补充:css3动画:
http://www.runoob.com/css3/css3-animations.html
回到angular:
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="ngAnimate">
隐藏 DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck">
</div>
</body>
</html>
angular 动画