Animering af AngularJS-apps med ngAnimate

Denne blog forklarer, hvordan man bruger populær ngAnimate til at tilføje sideovergange / animationer til vinkeludsigter, dvs. hvordan man opretter animation ved hjælp af ngAnimate

AngularJS er en superhelt JavaScript-ramme, der gør det nemt at oprette SPA (Single Page Applications). Oven i det kommer AngularJS med en håndfuld vinkelmoduler, der kan bruges til at skabe en fantastisk brugeroplevelse. I dette indlæg skal vi se, hvordan man bruger populær ngAnimate til at tilføje sideovergange / animationer til vinkeludsigter.



ngAnimate kan bruges med forskellige direktiver som ngRepeat, ngView, ngInclude, ngIf, ngMessage osv.



I dette indlæg bruger vi animationer med ngView

Her bruger vi Brackets IDE fra Adobe, men du er fri til at bruge andre, for eksempel Sublime Text, WebStorm fra JetBrains osv.



Bemærk : Vi vil også bruge Bootswatch Bootstrap API til at give vores HTML-sider et smukt udseende

Projektstruktur:

Nedenfor er projektstrukturen i parentes IDE



ngAnimate-angularjs-project-structure

Her er den korte beskrivelse af hver fil, der bruges i projektet

animation.css - vigtigste CSS-fil, hvor vi definerer vores sideanimationer

bootstrap.min.css - bootswatch bootstrap til at give vores mærker et smukt udseende

config.js - vigtigste JavaScript-fil, hvor vi definerer vores vinkelmodul sammen med ruter og controllere

shellPage.html - Dette er shell-siden, hvor andre visninger indlæses dynamisk

view1.html, view2.html, view3.html - Dette er de delvise visninger, der indlæses i shellPage

Hvordan anvendes animationer:

ngAnimate anvender CSS-klasser på forskellige vinkelretningslinjer, afhængigt af om de går ind i eller forlader visningen

.ng-enter - Denne CSS-klasse gælder i direktivet, når den indlæses på siden

.ng-orlov - Denne CSS-klasse gælder i direktivet, når den forlader siden

Lad os gennemgå hver fil en efter en

shellPage.html

shellPage indlæser de krævede ressourcer, anvender ng-app til kroppen og tilføjer ng-view for at injicere visningerne dynamisk.

  

config.js

I config-fil definerer vi vores vinkelmodul sammen med ruter og controllere.

hvordan man bruger svæve i css

ModulovergangApp har to afhængigheder: ngAnimate og ngRoute

var transitionApp = angular.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 '})}) transformationApp.controller (' view1Controller ', funktion ($ scope) {$ scope.cssClass =' ​​view1 '}) transformationApp.controller (' view2Controller ', funktion ($ scope) { $ scope.cssClass = 'view2'}) transformationApp.controller ('view3Controller', funktion ($ scope) {$ scope.cssClass = 'view3'})

Vi har defineret tre delvisninger (visning1, visning2, visning3), som vil blive injiceret i shell-siden afhængigt af URL'en. Respektive controllere indstiller en cssClass-attribut, som er navnet på CSS-klassen, som vil blive anvendt på ng-view. Vi definerer vores animationer i disse CSS-klasser, der indlæser hver side med forskellige animationer.

Delvise sider view1.html, view2.html, view3.html

Der er intet meget i delsider, bare noget tekst og link til andre synspunkter

visning1.html

Dette er visning 1

Visning 2 Visning 3

view2.html

Dette er View 2

Visning 1 Visning 3

view3.html

Dette er visning 3

Visning 1 Visning 2

Husk, at disse tre HTML-filer er delvise sider, der indsprøjtes i shellPage.html i henhold til den URL, som vi har defineret i config.js-filen

Definition af stilarter og animationer:

Lad os sætte noget liv i vores synspunkter ved at anvende CSS på det

.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 { farve: # 333 position: absolut tekstjustering: center top: 50 px bredde: 100%} / * Baggrunds- og tekstfarver til delvisningssider (view1, view2, view3) ------------- ------------------------------------------------ * / .view1 {baggrund: # bef2de farve: # 00907c} .view2 {baggrund: # D4D0EA farve: # 55316f} .view3 {baggrund: # FFCBA4 farve: rgba (149, 95, 40, 0.91)}

For at foretage en ren overgang mellem forskellige visninger indstiller vi CSS z-index-egenskaben

.view.ng-leave {z-index: 9999} .view.ng-enter {z-index: 8888}

Nu er det tid til at definere vores animationer

Skub til venstre animation

/ * glid ud til venstre * / @keyframes slideOutLeft {til {transform: translateX (-100%)}} @ -moz-keyframes slideOutLeft {til {-moz-transform: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {til {-webkit-transform: translateX (-100%)}}

Opskalere animation

/ * skalere op * / @keyframes scaleUp {fra {opacitet: 0,3 transform: skala (0,8)}} @ -moz-keyframes scaleUp {fra {opacitet: 0,3 -moz-transform: skala (0,8)}} @ -webkit- keyframes scaleUp {fra {opacity: 0.3 -webkit-transform: scale (0.8)}}

Skub ind fra højre animation

hvad er en nøglefejl
/ * glid ind fra højre * / @keyframes slideInRight {fra {transform: translateX (100%)} til {transform: translateX (0)}} @ -moz-keyframes slideInRight {fra {-moz-transform: translateX (100 %)} til {-moz-transform: translateX (0)}} @ -webkit-keyframes slideInRight {fra {-webkit-transform: translateX (100%)} til {-webkit-transform: translateX (0)}}

Skub ind fra bunden Animation

/ * glide ind fra bunden * / @keyframes slideInUp {fra {transform: translateY (100%)} til {transform: translateY (0)}} @ -moz-keyframes slideInUp {fra {-moz-transform: translateY (100 %)} til {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {fra {-webkit-transform: translateY (100%)} til {-webkit-transform: translateY (0)}}

Roter og fald animation

/ * roter og fald * / @ -webkit-keyframes rotateFall {0% {-webkit-transform: rotateZ (0deg)} 20% {-webkit-transform: rotateZ (10deg) -webkit-animation-timing-function: let- ud} 40% {-webkit-transformation: 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-function: let ud} 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) animation-timing-funktion: let ud} 40% {transform: rotateZ (17deg)} 60% {transform: rotateZ (16deg)} 100% {transform: translateY (100%) rotateZ (17deg)}}

Roter avisanimation ud

/ * roter avis * / @ -webkit-keyframes rotateOutNewspaper {til {-webkit-transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}} @ -moz-keyframes rotateOutNewspaper {til {-moz-transform: translateZ (-3000px) rotateZ (360deg) opacitet: 0}} @keyframes rotateOutNewspaper {til {transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}}

Anvendelse af animationer:

Det er tid til at anvende de animationer, som vi havde defineret før

Se 1 animationer

/ * Se 1 animationer til sideorlov, og indtast * / .view1.ng-leave {-webkit-animation: slideOutLeft 0.5s begge let-i-moz-animation: slideOutLeft 0.5s begge let-in-animation: slideOutLeft 0.5s begge lethed -in} .view1.ng-enter {-webkit-animation: scaleUp 0.5s begge lethed-i -moz-animation: scaleUp 0.5s begge lethed-in animation: scaleUp 0.5s begge lethed-in}

Se 2 animationer

/ * Se 2 animationer til sideforlad og indtast * / .view2.ng-leave {-webkit-transform-origin: 0% 0% -webkit-animation: rotateFall 1s begge let-i -moz-transform-origin: 0% 0% -moz-animation: rotateFall 1s begge let-i transform-origin: 0% 0% animation: rotateFall 1s begge lette-in} .view2.ng-enter {-webkit-animation: slideInRight 0.5s begge let-in - moz-animation: slideInRight 0.5s begge lethed-in animation: slideInRight 0.5s begge lethed-in}

Se 3 animationer

/ * Se 3 animationer til sideforlad og indtast * / .view3.ng-leave {-webkit-transform-origin: 50% 50% -webkit-animation: rotateOutNewspaper .5s begge let-i -moz-transform-origin: 50 % 50% -moz-animation: rotateOutNewspaper .5s begge lette i transform-origin: 50% 50% animation: rotateOutNewspaper .5s begge lette-i} .view3.ng-enter {-webkit-animation: slideInUp 0.5s begge lette -in -moz-animation: slideInUp 0.5s begge lethed-in animation: slideInUp 0.5s begge lethed-in}

Vi er færdige med alle ændringer. Nu er det tid til at køre applikationen

Kørsel af applikationen

Når du kører applikationen, vil du blive præsenteret for nedenstående side:

Klik på linkene, så ser du animationer, når du går ind og forlader delsiderne.

Der er forskellige andre animationer, der kan bruges. Et overvældende sæt af mulige effekter kan også være her: http://tympanus.net/Development/PageTransitions/

Download koden, og prøv den selv

[buttonleads form_title = ”Download kode” redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text = ”Download kode”]

Jeg håber, du kunne lide ovenstående animation med ngAnimate blog. Hvis du ønsker at dybe dybt ned i Angular JS, vil jeg anbefale dig, hvorfor ikke kigge på vores kursus side. Angular JS-certificeringstræningen på Edureka vil gøre dig til en ekspert i Angular JS gennem live instruktørledede sessioner og praktisk træning ved hjælp af virkelige brugssager.

Har du et spørgsmål til os? Nævn det i kommentarfeltet, og vi vender tilbage til dig.

Relaterede indlæg:

Parsing af XML-filer ved hjælp af SAX Parser