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