Zusammenfassung der Möglichkeiten zum Implementieren des Ein- oder Ausblendens von Animationseffekten in AngularJS

Zusammenfassung der Möglichkeiten zum Implementieren des Ein- oder Ausblendens von Animationseffekten in AngularJS_AngularJS

WBOY

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

Original

1417 Leute haben es durchsucht

AngularJS ist eine Reihe umfangreicher Frameworks zum Erstellen von Single-Page-Webanwendungen und bietet alle Funktionen, die zum Erstellen umfangreicher und interaktiver Anwendungen erforderlich sind. Eines der Hauptmerkmale ist, dass Angular Animationen unterstützt.

Dieses Erlebnis verwendet AngularJS, um Animationseffekte zwischen den beiden Zuständen „Einblenden/Ausblenden“ hinzuzufügen.

Animationseffekte ein-/ausblenden durch CSS realisieren

Dinge:

→npm install angle-animage
→Abhängigkeit: var app = angle.module("app",["ngAnimate"]);
→Eine Variable im Controller erhält einen Bool-Wert
→In der Benutzeroberfläche steht eine Schaltfläche zur Verfügung. Klicken Sie hier, um den Bool-Wert zu ändern
→Der angezeigte/ausgeblendete Bereich in der Schnittstelle ermöglicht die Bindung von ng-if- und bool-Werten im Controller

app.js

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

Realisieren Sie den Ein-/Ausblenden-Animationseffekt durch die Animationsmethode

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

Nach dem Login kopieren

Animation kann einem bestimmten Klassennamen Urlaubs- und Eingabeereignisse hinzufügen. Wie lassen sich Animationseffekte innerhalb der Urlaubs- und Eingabefunktionen erzielen? Dies kann über TweenMax.min.js erreicht werden.

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

Unter diesen ist npm install topcoat eine gute Stilbibliothek.

Verwenden Sie direcive, um einen Animationseffekt zum Ein-/Ausblenden zu erzielen

Ist es möglich, dem angezeigten/ausgeblendeten Div-Teil ein Attribut hinzuzufügen, z. B. hide-me="app.isHidden"? Das hide-me-Attribut überwacht app.isHidden und entscheidet, ob es basierend auf der Änderung angezeigt wird Wert.

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

Der obige Inhalt ist eine Zusammenfassung der vom Herausgeber eingeführten Möglichkeiten zum Ein- und Ausblenden von Animationseffekten.