本文讲一下Angular中动画应用的部分。

首先,Angular本生不提供动画机制,需要在项目中加入Angular插件模块ngAnimate才能完成Angular的动画机制,Angular也不提供具体的动画样式,所以说,它的自由度和可定制性挺大的。

那么,刚开始需要在项目的入口html文件中引入Angular框架(angular.js),然后引入angular.animate.js。

在项目的js入口文件app.js中,新建项目模块,并且添加所依赖的模块ng-Animate(有其他需要的模块的话也可以引入,顺序没关系)

var demoApp = angular.module('demoApp',['ngAnimate','ui.router']);

这里中间插入一句,建议Angular中的依赖注入用如下模式,在ads、bds或者其他的前端自动化工具打包压缩后不会产生问题,因为仅仅通过给function传参的形式注入依赖,Angular是会对注入的变量名有严格的要求(如$scope变量名在控制器中注入时变量名只能写$scope):

//控制器.js、指令.js、过滤器.js的依赖注入建议都用这种方式写

//这是ui-route的配置,在app.js


demoApp.config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider){

   // your code.

}]);


好了,回到正题上。引入了ngAnimate之后,Angular的动画机制就能生效了。

Angular文档中写到如下指令和支持的动画

DirectiveSupported Animations
ngRepeatenter, leave and move
ngViewenter and leave
ngIncludeenter and leave
ngSwitchenter and leave
ngIfenter and leave
ngClassadd and remove
ngShow & ngHideadd and remove (the ng-hide class value)
formadd and remove (dirty, pristine, valid, invalid & all other validations)
ngModeladd and remove (dirty, pristine, valid, invalid & all other validations)

那么,怎么使用呢? 本文拿ng-repeat这个指令来做个介绍,其他的一些指令使用方式几乎相同,可类推。

ng-repeat 主要是对一个list的展示,这些元素是是被创建出来加入到DOM结构中去的,那么,它的动画过程为:

创建元素 ->.ng-enter ->.ng-enter-active -> 完成,呈默认状态

默认状态 ->.ng-leave ->.ng-leave-active -> 销毁元素


所以可以通过设置.ng-enter(.ng-leave) 和 .ng-enter-active(.ng-leave-active) 的样式,加上css3的动画来显示出动画,如:

<!-- HTML片段 -->

<div ng-init="users = [1,2,3,4,5]"></div>

<input class="filter-btn" type="search" ng-model="u" placeholder="search item" aria-label="search item" />

<ul>

<li class="item" ng-repeat="user in users | filter: u as result">

   {{user}}

</li>

</ul>

/* css片断 */

/*ng-repeat的元素*/

.item{

   -webkit-transition: all linear 1s;

   -o-transition: all linear 1s;

   transition: all linear 1s;

}

/*动画开始前*/

.item.ng-enter{

   opacity:0;

}

/*动画过程*/

.item-ng-enter-active{

   opacity:1;

}


这样的效果是对所有元素同时应用,可能实际运用中需要有一个先后的渐变出现的效果,这时候可以设置ng-enter-stagger来实现.

/*不同时出现*/

.item.ng-enter-stagger {

   transition-delay:0.5s;

   transition-duration:0;

}


同样的,这些angular animate提供的动画的class也可以应用到页面切换中去。如果通过写css的方式还无法满足需求,当然,还可以通过JS的方式来控制动画,下面的代码你可以理解为是一个模版

/* CLASS 是需要应用的class名,handles是支持的操作,如下图所示*/

/* 这里如果是应用在ui-view 的class上,模版会叠加(坑)*/

demoApp.animation('.classname',function(){

   return {

       'handles':function(element,className,donw){

           //... your code here

           //回调

           return function(cancelled){

               // alert(1);

           }

       }

   }

})


支持的操作:

本文主要简单的说明了ngAnimate在Angular项目中的使用,具体可以做出怎样的效果,还需要亲自实践一番。

其他:一个Angular第三方动画

(完。附上简单的demo)