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

時間 2019-11-18

標籤 angularjs 實現顯示隱藏動畫效果方式欄目 AngularJS 简体版

原文原文鏈接

本篇體驗在AngularJS中實如今"顯示/隱藏"這2種狀態切換間添加動畫效果。

經過CSS方式實現顯示/隱藏動畫效果

思路：

→npm install angular-animage
→依賴：var app = angular.module("app",["ngAnimate"]);
→controller中一個變量接收bool值
→界面中提供一個按鈕，點擊改變bool值
→界面中顯示/隱藏的區域提供ng-if和controller中的bool值綁定

app.jsjavascript

var app = angular.module("app",["ngAnimate"]);

app.controller("AppCtrl", function(){
    this.toggle = true;
})

index.htmlcss

<!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.csshtml

.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方法實現顯示/隱藏動畫效果java

app.animation("某個類名", function(){
    return {
        leave: function(element, done){
        
        },
        enter: function(element, done){
        
        }
    }
})

animation能夠在某個類名上加上leave,enter事件，leave和enter函數內部如何實現動畫效果呢？能夠經過TweenMax.min.js實現。

app1.jsnode

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.htmljquery

<!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,根據值的變化狀況再來決定是否顯示。web

app3.jsajax

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.htmlnpm

<!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>