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.
