AngularJS 是一組用於創建單頁Web應用的豐富框架，為構建豐富交互地應用帶來了所有需要的功能。其中一個主要的特性就是Angular帶來了對動畫的支援。
本篇體驗在AngularJS中實作在"顯示/隱藏"這2種狀態切換間加入動畫效果。
透過CSS方式實現顯示/隱藏動畫效果
思路：
→npm install angular-animage
→依賴：var app = angular.module("app",["ngAnimate"]);
→controller中變數接收bool值
→介面中提供一個按鈕，點選改變bool值
→介面中顯示/隱藏的區域提供ng-if和controller中的bool值綁定
app.js
var app = angular.module("app",["ngAnimate"]);
app.controller("AppCtrl", function(){
this.toggle = true;
})index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/> <link rel="stylesheet" href="styles.css"/> </head> <body ng-app="app" ng-controller="AppCtrl as app"> <button class="btn" ng-click="app.toggle=!app.toggle">Toggle Animation</button> <div class="toggle" ng-if="app.toggle">Some content here</div> <script src="../node_modules/angular/angular.min.js"></script> <script src="../node_modules/angular-animate/angular-animate.min.js"></script> <script src="app.js"></script> </body> </html>
styes.css
.toggle{
-webkit-transition: linear 1s;
-moz-transition: linear 1s;
-ms-transition: linear 1s;
-o-transition: linear 1s;
transition: linear 1s;
}
.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
ar app = 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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../node_modules/topcoat/css/topcoat-desktop-light.min.css"/> </head> <body class="well-lg" ng-app="app" ng-controller="AppCtrl as app"> <button class="topcoat-button--large--cta" ng-click="app.toggle = !app.toggle">点我</button> <hr/> <div class="topcoat-notification toggle" ng-if="app.toggle">I'm too your to fade</div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script> <script src="../node_modules/angular/angular.min.js"></script> <script src="../node_modules/angular-animate/angular-animate.min.js"></script> <script src="app1.js"></script> </body> </html>
其中，npm install topcoat是一個很好的樣式庫。
使用direcive的方式實現顯示/隱藏動畫效果
是否可以在顯示/隱藏的div部分加上一個屬性，例如hide-me="app.isHidden",hide-me這個屬性監控app.isHidden,根據值的變化情況再來決定是否顯示。
app3.js
var app=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){
return function(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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/> </head> <body ng-app="app" ng-controller="AppCtrl as app"> <button id="my-button" class="btn-primary" ng-click="app.fadeIt()">Click to fade</button> <div id="my-badge" class="badge" hide-me="app.isHidden">Fade me</div> <script src="../node_modules/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script> <script src="../node_modules/angular/angular.min.js"></script> <script src="../node_modules/angular-animate/angular-animate.min.js"></script> <script src="app3.js"></script> </body> </html>
以上內容是小編給大家介紹的AngularJS中實現顯示或隱藏動畫效果的方式總結，希望大家喜歡。
