使用angular-animate应该使用angular哪个版本
答案:1 悬赏:50 手机版
解决时间 2021-03-29 10:38
- 提问者网友:精神病院里
- 2021-03-28 11:49
使用angular-animate应该使用angular哪个版本
最佳答案
- 五星知识达人网友:狂恋
- 2021-03-28 12:24
运用部分讲解:
首先,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
Suported Animations
ngRepeat enter, leave and move
ngView enter and leave
ngInclude enter and leave
ngSwitch enter and leave
ngIf enter and leave
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 add 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的动画来显示出动画,如:
{{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);
}
}
}
})
首先,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
Suported Animations
ngRepeat enter, leave and move
ngView enter and leave
ngInclude enter and leave
ngSwitch enter and leave
ngIf enter and leave
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 add 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的动画来显示出动画,如:
{{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);
}
}
}
})
我要举报
如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
大家都在看
推荐资讯