AngularJS ist ein superheldenhaftes JavaScript-Framework, das das Erstellen von Single Page Applications (SPA) sehr einfach macht. Darüber hinaus enthält AngularJS eine Handvoll Winkelmodule, mit denen eine beeindruckende Benutzererfahrung erzielt werden kann. In diesem Beitrag erfahren Sie, wie Sie mit dem beliebten ngAnimate Seitenübergänge / Animationen zu Winkelansichten hinzufügen.
ngAnimate kann mit verschiedenen Anweisungen wie ngRepeat, ngView, ngInclude, ngIf, ngMessage usw. verwendet werden.
wie man br in html benutzt
In diesem Beitrag werden wir Animationen mit ngView verwenden
Hier verwenden wir Brackets IDE von Adobe, aber Sie können auch andere verwenden, z. B. Sublime Text, WebStorm von JetBrains usw.
Hinweis : Wir werden auch die Bootswatch Bootstrap API verwenden, um unseren HTML-Seiten ein schönes Aussehen zu verleihen
Projektstruktur:
Unten finden Sie die Projektstruktur in Brackets IDE
Hier ist die kurze Beschreibung jeder im Projekt verwendeten Datei
animation.css - Haupt-CSS-Datei, in der wir unsere Seitenanimationen definieren
bootstrap.min.css - Bootswatch Bootstrap für unsere geben markiert einen schönen Look
config.js - Haupt-JavaScript-Datei, in der wir unser Winkelmodul zusammen mit Routen und Controllern definieren
shellPage.html - Dies ist die Shell-Seite, auf der andere Ansichten dynamisch geladen werden
view1.html, view2.html, view3.html - Dies sind die Teilansichten, die in die shellPage geladen werden
Wie werden Animationen angewendet:
ngAnimate wendet CSS-Klassen auf verschiedene Angular-Direktiven an, je nachdem, ob sie die Ansicht betreten oder verlassen
.ng-enter - Diese CSS-Klasse gilt für die Direktive, wenn sie auf die Seite geladen wird
.ng-verlassen - Diese CSS-Klasse gilt für die Direktive, wenn sie die Seite verlässt
Lassen Sie uns jede Datei einzeln durchgehen
shellPage.html
shellPage lädt die erforderlichen Ressourcen, wendet ng-app auf body an und fügt ng-view hinzu, um die Ansichten dynamisch einzufügen.
config.js
In der Konfigurationsdatei definieren wir unser Winkelmodul zusammen mit Routen und Controllern.
ModulübergangApp hat zwei Abhängigkeiten: ngAnimate und ngRoute
var TransitionApp = angle.module ('TransitionApp', ['ngAnimate', 'ngRoute']) TransitionApp.config (Funktion ($ routeProvider) {$ routeProvider .when ('/', {templateUrl: 'partials / view1.html' , controller: 'view1Controller'}) .when ('/ view2', {templateUrl: 'partials / view2.html', controller: 'view2Controller'}) .when ('/ view3', {templateUrl: 'partials / view3. html ', controller:' view3Controller '})}) TransitionApp.controller (' view1Controller ', Funktion ($ scope) {$ scope.cssClass =' view1 '}) TransitionApp.controller (' view2Controller ', Funktion ($ scope) { $ scope.cssClass = 'view2'}) TransitionApp.controller ('view3Controller', Funktion ($ scope) {$ scope.cssClass = 'view3'})Wir haben drei Teilansichten (Ansicht1, Ansicht2, Ansicht3) definiert, die abhängig von der URL in die Shellpage eingefügt werden. Die jeweiligen Controller legen ein cssClass-Attribut fest, bei dem es sich um den Namen der CSS-Klasse handelt, die auf die ng-Ansicht angewendet wird. Wir werden unsere Animationen in diesen CSS-Klassen definieren, die jede Seite mit unterschiedlichen Animationen laden.
Teilseiten view1.html, view2.html, view3.html
Auf Teilseiten gibt es nicht viel, nur Text und Links zu anderen Ansichten
view1.html
Dies ist Ansicht 1
Ansicht 2 Ansicht 3
view2.html
Dies ist Ansicht 2
Ansicht 1 Ansicht 3
view3.html
Dies ist Ansicht 3
Ansicht 1 Ansicht 2
Denken Sie daran, dass diese drei HTML-Dateien Teilseiten sind, die gemäß der in der Datei config.js definierten URL in shellPage.html eingefügt werden
Stile und Animationen definieren:
Lassen Sie uns unseren Ansichten etwas Leben einhauchen, indem wir CSS darauf anwenden
.view {bottom: 0 padding-top: 200px position: absolute text-align: center top: 0 width: 100%} .view a {margin-top: 50px} .view h1 {font-size: 60px} #heading { Farbe: # 333 Position: absolute Textausrichtung: Mitte oben: 50px Breite: 100%} / * Hintergrund- und Textfarben für Seiten mit Teilansicht (Ansicht1, Ansicht2, Ansicht3) ------------- -------------------------------------------- * / .view1 {Hintergrund: # bef2de Farbe: # 00907c} .view2 {Hintergrund: # D4D0EA Farbe: # 55316f} .view3 {Hintergrund: # FFCBA4 Farbe: rgba (149, 95, 40, 0.91)}Um einen sauberen Übergang zwischen verschiedenen Ansichten zu erzielen, legen wir die CSS-Z-Index-Eigenschaft fest
.view.ng-Leave {Z-Index: 9999} .view.ng-Enter {Z-Index: 8888}Jetzt ist es Zeit, unsere Animationen zu definieren
Schieben Sie die Animation nach links
/ * nach links herausschieben * / @keyframes slideOutLeft {zu {transform: translateX (-100%)}} @ -moz-keyframes slideOutLeft {zu {-moz-transform: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {to {-webkit-transform: translateX (-100%)}}Animation vergrößern
/ * Scale Up * / @keyframes scaleUp {von {Deckkraft: 0,3 Transformation: Skala (0,8)}} @ -moz-Keyframes scaleUp {von {Deckkraft: 0,3 -moz-Transformation: Skala (0,8)}} @ -webkit- Keyframes scaleUp {from {Deckkraft: 0,3 -webkit-transform: scale (0,8)}}Schieben Sie von der rechten Animation ein
/ * von rechts einschieben * / @keyframes slideInRight {von {transform: translateX (100%)} nach {transform: translateX (0)}} @ -moz-keyframes slideInRight {von {-moz-transform: translateX (100) %)} nach {-moz-transform: translateX (0)}} @ -webkit-keyframes slideInRight {von {-webkit-transform: translateX (100%)} nach {-webkit-transform: translateX (0)}}Schieben Sie von unten Animation ein
/ * von unten einschieben * / @keyframes slideInUp {von {transform: translateY (100%)} nach {transform: translateY (0)}} @ -moz-keyframes slideInUp {von {-moz-transform: translateY (100) %)} nach {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {von {-webkit-transform: translateY (100%)} nach {-webkit-transform: translateY (0)}}Animation drehen und fallen lassen
/ * drehen und fallen * / @ -webkit-keyframes rotateFall {0% {-webkit-transform: rotateZ (0deg)} 20% {-webkit-transform: rotateZ (10deg) -webkit-animation-Timing-Funktion: easy- out} 40% {-webkit-transform: rotateZ (17deg)} 60% {-webkit-transform: rotateZ (16deg)} 100% {-webkit-transform: translateY (100%) rotateZ (17deg)}} @ -moz -keyframes rotateFall {0% {-moz-transform: rotateZ (0deg)} 20% {-moz-transform: rotateZ (10deg) -moz-animation-Timing-Funktion: easy-out} 40% {-moz-transform: rotateZ (17deg)} 60% {-moz-transform: rotateZ (16deg)} 100% {-moz-transform: translateY (100%) rotateZ (17deg)}} @keyframes rotateFall {0% {transform: rotateZ (0deg) } 20% {transform: rotateZ (10deg) Animations-Timing-Funktion: Easy-Out} 40% {transform: rotateZ (17deg)} 60% {transform: rotateZ (16deg)} 100% {transform: translateY (100%) rotateZ (17deg)}}Zeitungsanimation ausschalten
/ * Zeitung herausdrehen * / @ -webkit-keyframes rotateOutNewspaper {to {-webkit-transform: translateZ (-3000px) rotateZ (360deg) Deckkraft: 0}} @ -moz-keyframes rotateOutNewspaper {to {-moz-transform: translateZ (-3000px) rotateZ (360deg) Deckkraft: 0}} @keyframes rotateOutNewspaper {to {transform: translateZ (-3000px) rotateZ (360deg) Deckkraft: 0}}Anwenden von Animationen:
Es ist Zeit, die zuvor definierten Animationen anzuwenden
So beenden Sie eine Methode in Java
1 Animationen anzeigen
/ * Zeigen Sie 1 Animationen für das Verlassen und Eingeben der Seite an * / .view1.ng-Leave {-webkit-animation: slideOutLeft 0.5s beide easy-in -moz-animation: slideOutLeft 0.5s beide easy-in-Animation: slideOutLeft 0.5s beide easy -in} .view1.ng-enter {-webkit-animation: scaleUp 0.5s beide easy-in -moz-animation: scaleUp 0.5s beide easy-in-Animation: scaleUp 0.5s beide easy-in}2 Animationen anzeigen
/ * 2 Animationen für das Verlassen und Eingeben der Seite anzeigen * / .view2.ng-verlassen {-webkit-transform-origin: 0% 0% -webkit-animation: rotateFall 1s beide easy-in -moz-transform-origin: 0% 0% -moz-animation: rotateFall 1s beide Easy-In-Transformationsursprung: 0% 0% Animation: RotateFall 1s beide Easy-In} .view2.ng-Enter {-webkit-Animation: slideInRight 0.5s beide Easy-In - Moz-Animation: slideInRight 0.5s beide Easy-In-Animation: slideInRight 0.5s beide Easy-In}3 Animationen anzeigen
/ * 3 Animationen für das Verlassen und Eingeben der Seite anzeigen * / .view3.ng-Leave {-webkit-transform-origin: 50% 50% -webkit-animation: rotateOutNewspaper .5s beide easy-in -moz-transform-origin: 50 % 50% -moz-animation: rotateOutNewspaper .5s beide einfach transformieren Ursprung: 50% 50% Animation: rotateOutNewspaper .5s beide easy-in} .view3.ng-enter {-webkit-animation: slideInUp 0.5s beide einfach -in -moz-Animation: slideInUp 0.5s beide Easy-In-Animation: slideInUp 0.5s beide Easy-In}Wir sind mit allen Änderungen fertig. Jetzt ist es Zeit, die Anwendung auszuführen
Ausführen der Anwendung
Beim Ausführen der Anwendung wird die folgende Seite angezeigt:
Klicken Sie auf die Links und Sie sehen Animationen im Spiel, wenn Sie die Teilseiten betreten und verlassen.
Es gibt verschiedene andere Animationen, die verwendet werden können. Auch eine überwältigende Reihe möglicher Effekte kann hier sein: http://tympanus.net/Development/PageTransitions/
Laden Sie den Code herunter und probieren Sie es selbst aus
[buttonleads form_title = 'Code herunterladen' redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text = 'Code herunterladen']
Ich hoffe dir hat die obige Animation mit ngAnimate Blog gefallen. Wenn Sie tief in Angular JS eintauchen möchten, würde ich Ihnen empfehlen, warum Sie sich nicht unsere ansehen sollten Kursseite. Das Angular JS-Zertifizierungstraining bei Edureka macht Sie zu einem Experten für Angular JS durch Live-Sitzungen unter Anleitung von Lehrern und praktische Schulungen anhand realer Anwendungsfälle.
Hast du eine Frage an uns? Bitte erwähnen Sie es in den Kommentaren und wir werden uns bei Ihnen melden.
Zusammenhängende Posts:
Analysieren von XML-Dateien mit SAX Parser