AngularJS中实现显示或隐藏动画效果的方式总结
AngularJS是一组用于创建单页Web应用的丰富框架，给构建丰富交互地应用带来了所有需要的功能。其中一项主要的特性就是Angular带来了对动画的支持。
本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果。
通过CSS方式实现显示/隐藏动画效果
思路：
→npminstallangular-animage
→依赖：varapp=angular.module("app",["ngAnimate"]);
→controller中一个变量接收bool值
→界面中提供一个按钮，点击改变bool值
→界面中显示/隐藏的区域提供ng-if和controller中的bool值绑定
app.js
varapp=angular.module("app",["ngAnimate"]);
app.controller("AppCtrl",function(){
this.toggle=true;
})
index.html
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title></title> <linkrel="stylesheet"href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/> <linkrel="stylesheet"href="styles.css"/> </head> <bodyng-app="app"ng-controller="AppCtrlasapp"> <buttonclass="btn"ng-click="app.toggle=!app.toggle">ToggleAnimation</button> <divclass="toggle"ng-if="app.toggle">Somecontenthere</div> <scriptsrc="../node_modules/angular/angular.min.js"></script> <scriptsrc="../node_modules/angular-animate/angular-animate.min.js"></script> <scriptsrc="app.js"></script> </body> </html>
styes.css
.toggle{
-webkit-transition:linear1s;
-moz-transition:linear1s;
-ms-transition:linear1s;
-o-transition:linear1s;
transition:linear1s;
}
.toggle.ng-enter{
opacity:0;
}
.toggle.ng-enter-active{
opacity:1;
}
.toggle.ng-leave{
opacity:1;
}
.toggle.ng-leave-active{
opacity:0;
}
通过animation方法实现显示/隐藏动画效果
app.animation("某个类名",function(){
return{
leave:function(element,done){
},
enter:function(element,done){
}
}
})
animation可以在某个类名上加上leave,enter事件，leave和enter函数内部如何实现动画效果呢？可以通过TweenMax.min.js实现。
app1.js
arapp=angular.module("app",["ngAnimate"]);
app.controller("AppCtrl",function(){
this.toggle=true;
})
app.animation(".toggle",function(){
return{
leave:function(element,done){
//element.text("nooooo");
TweenMax.to(element,1,{opacity:0,onComplete:done})
},
enter:function(element,done){
TweenMax.from(element,1,{opacity:0,onComplete:done})
}
}
})
index1.html
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title></title> <linkrel="stylesheet"href="../node_modules/topcoat/css/topcoat-desktop-light.min.css"/> </head> <bodyclass="well-lg"ng-app="app"ng-controller="AppCtrlasapp"> <buttonclass="topcoat-button--large--cta"ng-click="app.toggle=!app.toggle">点我</button> <hr/> <divclass="topcoat-notificationtoggle"ng-if="app.toggle">I'mtooyourtofade</div> <scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script> <scriptsrc="../node_modules/angular/angular.min.js"></script> <scriptsrc="../node_modules/angular-animate/angular-animate.min.js"></script> <scriptsrc="app1.js"></script> </body> </html>
其中，npminstalltopcoat是一个很好的样式库。
使用direcive的方式实现显示/隐藏动画效果
是否可以在显示/隐藏的div部分加上一个属性，比如hide-me="app.isHidden",hide-me这个属性监控app.isHidden,根据值的变化情况再来决定是否显示。
app3.js
varapp=angular.module('app',["ngAnimate"]);
app.controller("AppCtrl",function(){
this.isHidden=false;
this.fadeIt=function(){
//TweenMax.to($("#my-badge"),1,{opacity:0})
this.isHidden=!this.isHidden;
}
})
app.directive("hideMe",function($animate){
returnfunction(scope,element,attrs){
scope.$watch(attrs.hideMe,function(newVal){
if(newVal){
//TweenMax.to(element,1,{opacity:0});
$animate.addClass(element,"fade");
}else{
$animate.removeClass(element,"fade");
}
})
}
})
app.animation(".fade",function(){
return{
addClass:function(element,className){
TweenMax.to(element,1,{opacity:0});
},
removeClass:function(element,className){
TweenMax.to(element,1,{opacity:1});
}
}
})
index3.html
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title></title> <linkrel="stylesheet"href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/> </head> <bodyng-app="app"ng-controller="AppCtrlasapp"> <buttonid="my-button"class="btn-primary"ng-click="app.fadeIt()">Clicktofade</button> <divid="my-badge"class="badge"hide-me="app.isHidden">Fademe</div> <scriptsrc="../node_modules/jquery/dist/jquery.min.js"></script> <scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script> <scriptsrc="../node_modules/angular/angular.min.js"></script> <scriptsrc="../node_modules/angular-animate/angular-animate.min.js"></script> <scriptsrc="app3.js"></script> </body> </html>
以上内容是小编给大家介绍的AngularJS中实现显示或隐藏动画效果的方式总结，希望大家喜欢。