Rumah > Artikel > hujung hadapan web > Ringkasan cara untuk melaksanakan tunjukkan atau menyembunyikan kesan animasi dalam AngularJS_AngularJS

Ringkasan cara untuk melaksanakan tunjukkan atau menyembunyikan kesan animasi dalam AngularJS_AngularJS

WBOYasal: 2016-05-16 15:22:341396semak imbas

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

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

Realisasikan tunjukkan/sembunyikan kesan animasi melalui kaedah animasi

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

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

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>

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

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>

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Melaksanakan lompatan berjadual ke halaman tertentu berdasarkan kemahiran JavaScript_javascriptArtikel seterusnya：Melaksanakan lompatan berjadual ke halaman tertentu berdasarkan kemahiran JavaScript_javascript

Artikel berkaitan

Lihat lagi