[让你的 AngularJS 应用动起来:ngView](http://www.oschina.net/translate/animating-angularjs-apps-ngview) [AngularJS ngView Animation Effects](http://dfsq.github.io/ngView-animation-effects/app/#/code) [ngAnimate官方文档](https://docs.angularjs.org/api/ngAnimate)
Activity
Wscats commentedon Aug 11, 2016
引入JS文件
<script type="text/javascript" src="dist/js/angular-animate.js"></script>
<script type="text/javascript" src="dist/js/angular-animate.js"></script>
注入模块ngAnimate
var app = angular.module('wsscat', ['ngRoute', 'ngAnimate']);
ng-enter和ng-leave
可以使用
ng-enter
和ng-leave
,配合使用之后就可以让ng-view视图切换的时候产生动画,注意ng-enter
和ng-leave
和类名之间组合使用的时候中间是没有空格的如果我们只使用.ng-enter和.ng-leave定义动画,那么全部加载的地方都有动画
ng-view
在ng-view上加入对应的class,我们可以在每个路由定义pageClass的变量
例如下面:
<div class="fad {{pageClass}}" ng-view=""></div>
所以上面两个控制器可以根据变量放不同的类名,实现不同控制器有不同的切换动画
Wscats commentedon Sep 27, 2016
我么除了可以用ng-XXX的方式来给元素添加动画还可以用JS来触发动画
同样是药先引入ngAnimate模块
var app = angular.module('wsscat', ['ngAnimate']);
我们可以用animation方法并且使用$animateCss服务来定义过度动画,当然它其实相当于下面这两种过渡动画,只是一个写在js里面一个定义在css里面
.ng-enter
->.ng-enter.ng-enter-active
.ng-leave
->.ng-leave.ng-leave-active
JS写法
CSS写法