1.AngularJS提供了动画效果，可以配合CSS使用；
2.AngularJS使用动画需要引入angular-animate.min.js库
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js.min.js"></script>
还需要在应用中使用模型ngAnimate:<body ng-app="ngAnimate">
3.动画是通过改变HTML元素产生的动态变化效果；
<body ng-app="ngAnimate">
隐藏DIV：<input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
4.如果我们应用已经设置了应用名，可以把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>
5.ngAnimate做了什么？
**ngAnimate模型可以添加或移除class；
**ngAnimate模型并不能使HTML元素产生动画，但是ngAnimate会监测事件，类似隐藏显示HTML元素，如果事件发生ngAnimate就会使用预定义的class来设置HTML元素的动画；
**AngularJS添加/移除class的指令：
(1)ng-show：添加ng-class的值
(2)ng-hide：移除ng-class的值
(3)ng-class
(4)ng-view
(5)ng-include
(6)ng-repeat：当HTML元素位置改变时，ng-repeat指令同样可以添加ng-move类
(7)ng-if
(8)ng-switch
类集合：
(9)ng-animate
(10)ng-hide-animate
(11)ng-hide-add：如果元素将被隐藏
(12)ng-hide-remove：如果元素将显示
(13)ng-hide-add-active：如果元素将隐藏
(14)ng-hide-remove-active：如果元素将显示
6.使用CSS动画：
CSS过渡：让我们平滑的将一个CSS属性值改为另一个：
<style>
div{
transition:all linear 0.5s;
background-color:lightblue;
height:100px;
}
.ng-hide{height:0;} //在DIV元素设置了.ng-hide类时，过渡需要花费0.5秒，高度从100px变为0；
</style>
7.CSS动画：CSS动画允许你平滑的修改CSS属性值
<style>
@keyframe myChange{
from{
height:100px;
}to{
height:0;
}
}
div{
height:100px;
background-color:lightblue;
}
div.ng-hide{animation:0.5s myChange;}
</style>
扫一扫
1791
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
