Animácia aplikácií AngularJS pomocou ngAnimate

AngularJS je superhrdinský rámec JavaScriptu, vďaka ktorému je vytváranie Single Page Applications (SPA) veľmi jednoduché. Okrem toho prichádza AngularJS s niekoľkými uhlovými modulmi, ktoré možno použiť na vytvorenie úžasného používateľského zážitku. V tomto príspevku sa dozvieme, ako používať populárny ngAnimate na pridanie prechodov / animácií stránok do uhlových pohľadov.

ngAnimate je možné použiť s rôznymi smernicami ako ngRepeat, ngView, ngInclude, ngIf, ngMessage atď.

V tomto príspevku použijeme animácie s ngView

Tu používame zátvorky IDE od spoločnosti Adobe, ale môžete slobodne používať ďalšie, napríklad Sublime Text, WebStorm od JetBrains atď.

Poznámka : Na zaistenie krásneho vzhľadu našich stránok HTML tiež použijeme Bootswatch Bootstrap API

java previesť binárne na desatinné

Štruktúra projektu:

Ďalej je uvedená štruktúra projektu v zátvorkách IDE

Tu je krátky popis každého súboru použitého v projekte

animation.css - hlavný súbor CSS, kde definujeme naše animácie stránok

bootstrap.min.css Topánka bootstrap pre dávanie označí krásny vzhľad

config.js - hlavný súbor JavaScriptu, kde definujeme náš uhlový modul spolu s trasami a radičmi

shellPage.html - Toto je stránka shellu, na ktorej sa dynamicky načítajú ďalšie zobrazenia

view1.html, view2.html, view3.html - Toto sú čiastočné pohľady, ktoré sa načítajú do shellPage

Ako sa používajú animácie:

ngAnimate aplikuje triedy CSS na rôzne uhlové smernice v závislosti od toho, či vstupujú do pohľadu alebo z neho odchádzajú

.ng-vstúpiť - Táto trieda CSS sa na smernicu vzťahuje vždy, keď sa načíta na stránku

.ng-odísť - Táto trieda CSS sa na smernicu vzťahuje vždy, keď opustí stránku

Prejdime si postupne každý súbor

shellPage.html

shellPage načíta požadované zdroje, aplikuje ng-app na body a pridá ng-view na dynamické vloženie pohľadov.

config.js

V konfiguračnom súbore definujeme náš uhlový modul spolu s trasami a radičmi.

Modul transitionApp majú dve závislosti: ngAnimate a ngRoute

var transitionApp = angular.module ('transitionApp', ['ngAnimate', 'ngRoute']) transitionApp.config (funkcia ($ 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 ', function ($ scope) {$ scope.cssClass =' ​​view1 '}) transitionApp.controller (' view2Controller ', function ($ scope) { $ scope.cssClass = 'view2'}) transitionApp.controller ('view3Controller', function ($ scope) {$ scope.cssClass = 'view3'})

Definovali sme tri čiastkové pohľady (view1, view2, view3), ktoré budú vložené do shellpage v závislosti na URL. Respective Controllers nastaví atribút cssClass, čo je názov triedy CSS, ktorý sa použije na ng-view. Naše animácie si zadefinujeme v týchto triedach CSS, ktoré načítajú každú stránku s rôznymi animáciami.

Čiastočné stránky view1.html, view2.html, view3.html

Na čiastkových stránkach nie je nič moc, iba nejaký text a odkaz na iné zobrazenia

view1.html

java ako ukončiť program

Toto je pohľad 1
  Výhľad 2   Výhľad 3 

view2.html

Toto je pohľad 2
  Zobraziť 1   Výhľad 3 

view3.html

Toto je pohľad 3
  Zobraziť 1   Výhľad 2 

Pamätajte, že tieto tri súbory HTML sú čiastkové stránky, ktoré sa vložia do súboru shellPage.html podľa adresy URL, ktorú sme definovali v súbore config.js.

Definovanie štýlov a animácií:

Poďme oživiť naše názory tým, že na ne použijeme CSS

.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 { farba: pozícia 333: absolútne zarovnanie textu: stred hore: 50px šírka: 100%} / * Farby pozadia a textu pre stránky s čiastočným zobrazením (view1, view2, view3) ------------- ------------------------------------------------ * / .view1 {background: # bef2de color: # 00907c} .view2 {background: # D4D0EA color: # 55316f} .view3 {background: # FFCBA4 color: rgba (149, 95, 40, 0,91)}

Aby sme dosiahli čistý prechod medzi rôznymi pohľadmi, nastavíme vlastnosť CSS z-index

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

Teraz je čas definovať naše animácie

Animácia snímok doľava

/ * vysuňte doľava * / @keyframes slideOutLeft {do {transformácie: translateX (-100%)}} @ -moz-keyframes slideOutLeft {do {-moz-transform: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {to {-webkit-transform: translateX (-100%)}}

Zväčšiť veľkosť animácie

/ * scale up * / @keyframes scaleUp {od {opacity: 0,3 transformácia: scale (0,8)}} @ -moz-keyframes scaleUp {od {opacity: 0,3 -moz-transform: scale (0,8)}} @ -webkit- keyframes scaleUp {from {opacity: 0.3 -webkit-transform: scale (0.8)}}

Zasunutie z pravej animácie

/ * zasunúť sprava * / @keyframes slideInRight {od {transform: translateX (100%)} do {transform: translateX (0)}} @ -moz-keyframes slideInRight {z {-moz-transform: translateX (100 %)} na {-moz-transform: translateX (0)}} @ -webkit-keyframes slideInRight {od {-webkit-transform: translateX (100%)} do {-webkit-transform: translateX (0)}}

Zasunutie zo spodnej animácie

/ * zasuňte zdola * / @keyframes slideInUp {od {transform: translateY (100%)} do {transform: translateY (0)}} @ -moz-keyframes slideInUp {z {-moz-transform: translateY (100 %)} na {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {od {-webkit-transform: translateY (100%)} do {-webkit-transform: translateY (0)}}

Otočenie a pád animácie

/ * rotate and fall * / @ -webkit-keyframes rotateFall {0% {-webkit-transform: rotateZ (0deg)} 20% {-webkit-transform: rotateZ (10deg) -webkit-animation-timing-function: 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-function: 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ácia: rotateZ (10 stupňov), funkcia časovania animácie: uľahčenie} 40% {transformácia: rotateZ (17 stupňov)} 60% {transformácia: rotateZ (16 stupňov)} 100% {transformácia: translateY (100%) rotateZ (17deg)}}

Otočenie animácie novín

/ * otočiť noviny * / @ -webkit-keyframes rotateOutNewspaper {na {-webkit-transform: translateZ (-3000px) rotateZ (360deg) nepriehľadnosť: 0}} @ -moz-keyframes rotateOutNewspaper {na {-moz-transform: translateZ (-3000px) rotateZ (360stupňov) nepriehľadnosť: 0}} @keyframes rotateOutNewspaper {na {transformácia: translateZ (-3000px) rotateZ (360stupňov) nepriehľadnosť: 0}}

Uplatňovanie animácií:

Je čas použiť animácie, ktoré sme si predtým definovali

Zobraziť 1 animácií

/ * Zobrazte 1 animáciu pre opustenie stránky a zadajte * / .view1.ng-leave {-webkit-animácia: slideOutLeft 0,5 s obidve uľahčenie v -moz-animácia: slideOutLeft 0,5 s obe uľahčenie animácie: slideOutLeft 0,5 s obe uľahčenie -v} .view1.ng-enter {-webkit-animácia: scaleUp 0,5 s obidve uľahčenie -moz-animácia: scaleUp 0,5 s obe uľahčenie animácie: scaleUp 0,5 s obe uľahčenie}

Zobraziť 2 animácie

/ * Zobrazte 2 animácie pre opustenie stránky a zadajte * / .view2.ng-leave {-webkit-transform-origin: 0% 0% -webkit-animation: rotateFall 1s ako ľahká in -moz-transform-origin: 0% 0% -moz-animation: rotateFall 1s oba uľahčenie transformácie: 0% 0% animácia: rotateFall 1s oba uľahčenie} .view2.ng-enter {-webkit-animation: slideInRight 0,5s oba uľahčenie - moz-animation: slideInRight 0,5 s obe uľahčenie animácie: slideInRight 0,5 s obe uľahčenie}

Zobraziť 3 animácie

/ * Zobrazte 3 animácie pre opustenie stránky a zadajte * / .view3.ng-leave {-webkit-transform-origin: 50% 50% -webkit-animation: rotateOutNewspaper. 5s ľahkosť v -moz-transform-origin: 50 % 50% -moz-animation: rotateOutNewspaper .5s oba uľahčujú transformáciu-pôvod: 50% 50% animácia: rotateOutNewspaper .5s obaja uľahčujú} }view3.ng-enter {-webkit-animation: slideInUp 0,5 s obidve uľahčujú -in -moz-animation: slideInUp 0,5 s obe uľahčenie animácie: slideInUp 0,5 s obe uľahčenie}

Všetky zmeny sme skončili. Teraz je čas spustiť aplikáciu

Spustenie aplikácie

Pri spustení aplikácie sa zobrazí nasledujúca stránka:

ako otestovať databázu

Kliknite na odkazy a uvidíte animácie v hre, pri vstupe a výstupe z čiastkových stránok.

Existujú rôzne ďalšie animácie, ktoré je možné použiť. Môže tu byť aj ohromná sada možných účinkov: http://tympanus.net/Development/PageTransitions/

Stiahnite si kód a vyskúšajte sami

[buttonleads form_title = ”Stiahnutie kódu” redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text = ”Stiahnutie kódu”]

Dúfam, že sa vám vyššie uvedená animácia s blogom ngAnimate páčila. Ak sa chcete hlboko ponoriť do Angular JS, odporučil by som vám, prečo sa nepozrieť na našu stránka kurzu. Certifikačné školenie Angular JS na Edureke z vás urobí experta na Angular JS prostredníctvom živých školení vedených inštruktorom a praktických školení s využitím prípadov reálneho života.

Máte na nás otázku? Uveďte to prosím v sekcii komentárov a my sa vám ozveme.

Súvisiace príspevky:

Analýza súborov XML pomocou analyzátora SAX