AngularJS中實現顯示或隱藏動畫效果的方式總結

AngularJS中實現顯示或隱藏動畫效果的方式總結_AngularJS

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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中實現顯示或隱藏動畫效果的方式總結，希望大家喜歡。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More