Ringkasan cara untuk melaksanakan tunjukkan atau menyembunyikan kesan animasi dalam AngularJS

Ringkasan cara untuk melaksanakan tunjukkan atau menyembunyikan kesan animasi dalam AngularJS_AngularJS

WBOY

Lepaskan： 2016-05-16 15:22:34

asal

1373 orang telah melayarinya

AngularJS ialah satu set rangka kerja yang kaya untuk mencipta aplikasi web satu halaman, membawa semua ciri yang diperlukan untuk membina aplikasi yang kaya dan interaktif. Salah satu ciri utama ialah Angular membawa sokongan untuk animasi.

Pengalaman ini menggunakan AngularJS untuk menambah kesan animasi antara dua keadaan "tunjukkan/sembunyikan".

Realisasikan tunjukkan/sembunyikan kesan animasi melalui CSS

Perkara:

→npm pasang angular-animage
→ Kebergantungan: var app = angular.module("app",["ngAnimate"]);
→Pembolehubah dalam pengawal menerima nilai bool
→Butang disediakan dalam antara muka, klik untuk menukar nilai bool
→Kawasan yang dipaparkan/tersembunyi dalam antara muka menyediakan ng-if dan nilai bool yang mengikat dalam pengawal

app.js

var app = angular.module("app",["ngAnimate"]);
app.controller("AppCtrl", function(){
 this.toggle = true;
})

Salin selepas log masuk

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>

Salin selepas log masuk

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;
}

Salin selepas log masuk

Realisasikan tunjukkan/sembunyikan kesan animasi melalui kaedah animasi

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

Salin selepas log masuk

Animasi boleh menambah cuti dan masukkan acara pada nama kelas tertentu Bagaimana untuk mencapai kesan animasi dalam cuti dan masukkan fungsi? Ini boleh dicapai melalui 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})
  }
 }
})

Salin selepas log masuk

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>

Salin selepas log masuk

Antaranya, npm install topcoat ialah perpustakaan gaya yang bagus.

Gunakan diresif untuk mencapai paparan/sembunyikan kesan animasi

Adakah mungkin untuk menambah atribut pada bahagian div yang dipaparkan/tersembunyi, seperti hide-me="app.isHidden" Atribut hide-me memantau app.isHidden dan memutuskan sama ada untuk memaparkannya berdasarkan perubahan dalam nilai.

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});
  }
 }
})

Salin selepas log masuk

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>

Salin selepas log masuk

Kandungan di atas adalah ringkasan cara untuk menunjukkan atau menyembunyikan kesan animasi dalam AngularJS yang diperkenalkan oleh editor saya harap anda menyukainya.