Heim > Artikel > Web-Frontend > Zusammenfassung der Möglichkeiten zum Implementieren des Ein- oder Ausblendens von Animationseffekten in AngularJS_AngularJS

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

WBOYOriginal: 2016-05-16 15:22:341396Durchsuche

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

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

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

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

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

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>

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

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>

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Implementierung geplanter Sprünge zu bestimmten Seiten basierend auf JavaScript_Javascript-KenntnissenNächster Artikel：Implementierung geplanter Sprünge zu bestimmten Seiten basierend auf JavaScript_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen