AngularJS中實現(xiàn)顯示或隱藏動畫效果的方式總結
更新時間：2015年12月31日 11:30:29 作者：Darren Ji
AngularJS 是一組用于創(chuàng)建單頁Web應用的豐富框架，給構建豐富交互地應用帶來了所有功能，其中一項主要的特性是Angular對動畫的支持。下面通過本文給大家介紹AngularJS中實現(xiàn)顯示或隱藏動畫效果的方式總結，對angularjs動畫效果相關知識感興趣的朋友一起學習
AngularJS 是一組用于創(chuàng)建單頁Web應用的豐富框架，給構建豐富交互地應用帶來了所有需要的功能。其中一項主要的特性就是Angular帶來了對動畫的支持。
本篇體驗在AngularJS中實現(xiàn)在"顯示/隱藏"這2種狀態(tài)切換間添加動畫效果。
通過CSS方式實現(xiàn)顯示/隱藏動畫效果
思路：
→npm install angular-animage
→依賴：var app = angular.module("app",["ngAnimate"]);
→controller中一個變量接收bool值
→界面中提供一個按鈕，點擊改變bool值
→界面中顯示/隱藏的區(qū)域提供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方法實現(xiàn)顯示/隱藏動畫效果
app.animation("某個類名", function(){
return {
leave: function(element, done){
},
enter: function(element, done){
}
}
})
animation可以在某個類名上加上leave,enter事件，leave和enter函數(shù)內(nèi)部如何實現(xiàn)動畫效果呢？可以通過TweenMax.min.js實現(xiàn)。
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的方式實現(xiàn)顯示/隱藏動畫效果
是否可以在顯示/隱藏的div部分加上一個屬性，比如hide-me="app.isHidden",hide-me這個屬性監(jiān)控app.isHidden,根據(jù)值的變化情況再來決定是否顯示。
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>
以上內(nèi)容是小編給大家介紹的AngularJS中實現(xiàn)顯示或隱藏動畫效果的方式總結，希望大家喜歡。
相關文章
angular使用md5,CryptoJS des加密的方法
這篇文章主要介紹了angular使用md5,CryptoJS des加密的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
解決angularjs前后端分離調(diào)用接口傳遞中文時中文亂碼的問題
今天小編就為大家分享一篇解決angularjs前后端分離調(diào)用接口傳遞中文時中文亂碼的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了關于angularJs清除瀏覽器緩存的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
使用Angular 6創(chuàng)建各種動畫效果的方法
Angular能夠讓我們創(chuàng)建出具有原生表現(xiàn)效果的動畫。我們將通過本文學習到如何使用Angular 6來創(chuàng)建各種動畫效果。在此，我們將使用Visual Studio Code來進行示例演示。感興趣的朋友跟隨小編一起看看吧2018-10-10
Angular4.x Event (DOM事件和自定義事件詳解)
今天小編就為大家分享一篇Angular4.x Event (DOM事件和自定義事件詳解)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
上傳文件在很多時候都能用到，這篇文章主要介紹了AngularJS上傳文件的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要為大家介紹了Angular應用打包和部署實現(xiàn)過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
這篇文章主要介紹了使用Angular內(nèi)置模塊進行HTTP請求方法步驟詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
本篇文章主要介紹了詳解Angular 4.x NgIf，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
本文主要介紹AngularJS ng-cloak 指令,這里幫大家整理了ng-clock指令的基礎資料,和簡單的代碼實例及效果圖,學習AngularJS指令的朋友可以參考下2016-08-08