angular1 之动画篇

发布时间：2020-12-17 09:54:01 所属栏目：安全来源：网络整理

导读：首先，Angular本生不提供动画机制，需要在项目中加入Angular插件模块ngAnimate才能完成Angular的动画机制，Angular也不提供具体的动画样式，所以说，它的自由度和可定制性挺大的。那么，刚开始需要在项目的入口html文件中引入Angular框架(angular.js)，然后

首先，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文档中写到如下指令和支持的动画

Directive	Supported Animations
ngRepeat	enter,leave and move
ngView	enter and leave
ngInclude	ngSwitch	ngIf	ngClass	add and remove
ngShow & ngHide	add and remove (the ng-hide class value)
form	add and remove (dirty,pristine,valid,invalid & all other validations)
ngModel	那么，怎么使用呢? 本文拿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的动画来显示出动画，如： {{user}} .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的方式来控制动画，下面的代码你可以理解为是一个模版 demoApp.animation('.classname',function(){ return { 'handles':function(element,className,donw){ //... your code here //回调 return function(cancelled){ // alert(1); } } } }) 支持的操作: 本文主要简单的说明了ngAnimate在Angular项目中的使用，具体可以做出怎样的效果，还需要亲自实践一番。其他：一个Angular 第三方动画。（编辑：李大同）【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

angular1 之 动画篇

angular1 之动画篇