AngularJS 中提供了ngAnimate模块,可以为网页提供动画效果。
典型的应用就是视图切换和元素添加与移除。
这里以ui-view 和 ng-repeat指令作为展示。
首先需要引入我们需要的js文件
<script src="../angular.js"></script>
<script src="../angular-ui-router.js"></script>
<script src="../angular-animate.js"></script>
再引入我们需要的模块:ui.router
和ngAnimate
。
angular.module("app", ['ui.router', 'ngAnimate'])
然后我们可以正常编写我们的应用,我们这里做的额外工作只是编写css文件。
只编写样式就可以了?实际上,$animate服务本身支持几个内置的指令,比如ng-repeat, ng-show, ng-view等。而它的本质只是为其在视图变化期间添加了额外的CSS样式。
对于添加元素事件会添加ng-enter
和ng-enter-a