ng-animate和ng-cookies怎么在角中使用 - 行业资讯 - 肥雀云

　　介绍

这篇文章给大家介绍ng-animate和ng-cookies怎么在角中使用,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

<强> ng-animate

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

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

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

var demoApp =, angular.module (& # 39; demoApp& # 39;,, (& # 39; ngAnimate& # 39; & # 39; ui.router& # 39;]);

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

//控制器. js,指令. js,过滤器. js的依赖注入建议都用这种方式写//这是ui-route的配置,在app.js 　　demoApp.config ([& # 39; stateProvider& # 39;美元,& # 39;urlRouterProvider& # 39;美元,函数(stateProvider美元,,urlRouterProvider美元){ 　　,//your 代码。　　}));

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

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

ng-animate和ng-cookies怎么在角中使用“> 那么,怎么使用呢?本文拿ng-repeat这个指令来做个介绍,其他的一些指令使用方式几乎相同,可类推。 ng-repeat主要是对一个列表的展示,这些元素是是被创建出来加入到DOM结构中去的,那么,它的动画过程为: 创建元素→.ng-enter→.ng-enter-active→完成,呈默认状态 默认状态→.ng-leave→.ng-leave-active→销毁元素 所以可以通过设置.ng-enter (.ng-leave)和.ng-enter-active (.ng-leave-active)的样式,加上css3的动画来显示出动画,如: <pre类= & lt; !——, HTML片段,——比; 　　& lt; div ng-init=皍sers =,(1、2、3、4、5)“祝辞& lt;/div> 　　& lt; input 类=癴ilter-btn",类型=皊earch", ng-model=皍",占位符=皊earch item", aria-label=皊earch item",/比; 　　& lt; ul> 　　& lt; li 类=癷tem", ng-repeat=皍ser 拷贝users |,过滤器:,u as result"比; 　　,{{user}} 　　& lt;/li> 　　& lt;/ul>/*,css片断,*//* ng-repeat的元素*/.item { 　　,-webkit-transition: all linear 1 s; 　　,-o-transition: all linear 1 s; 　　,转型:all linear 1 s; 　　}/*动画开始前*/.item.ng-enter { 　　,不透明度:0; 　　}/*动画过程*/.item-ng-enter-active { 　　,不透明度:1; 　　}

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

/*不同时出现*/.item.ng-enter-stagger  {
　　
　　,transition-delay: 0.5秒;
　　
　　,transition-duration: 0;
　　
　　}

同样的,这些角动画提供的动画的类也可以应用到页面切换中去。自定义动画(基于类)

,在添加移除类时自定义动画

.class-add ,,,:,,,.class-add-active :,,,. class

如果通过写css的方式还无法满足需求,当然,还可以通过JS的方式来控制动画、下面的代码你可以理解为是一个模版
/*, CLASS 是需要应用的类名,处理是支持的操作,如下图所示*//*,这里如果是应用在ui-view 的类上,模版会叠加(坑)*/demoApp.animation (& # 39; .classname& # 39;,函数(){ 　　return { 　　,& # 39;处理# 39;:函数(元素、className donw) {//?才能your code 这里//才能回调　　return 才能;函数(取消){//才能,警报(1); 　　,,} 　　,} 　　,} 　　})
支持的操作:

饼干[名字],美元=,价值;
这个是角设置饼干方法

美元cookieStore
提供一个被会话cookie支持的键值对(字符串——对象)存储。被存入和取出的对象将自动通过角的toJson/fromJson进行序列化/反序列化。
ng-animate和ng-cookies怎么在角中使用