Az AngularJS alkalmazások animálása az ngAnimate alkalmazással

Ez a blog elmagyarázza, hogyan lehet a népszerű ngAnimate-et használni oldalátmenetek / animációk hozzáadásához szögletes nézetekhez, azaz hogyan lehet animációt létrehozni az ngAnimate használatával

Az AngularJS egy szuperhős JavaScript keretrendszer, amely nagyon egyszerűvé teszi az egyoldalas alkalmazások (SPA) létrehozását. Ezen felül az AngularJS egy maroknyi szögletes modult tartalmaz, amelyek felhasználásával fantasztikus felhasználói élményt lehet létrehozni. Ebben a bejegyzésben megnézzük, hogyan lehet a népszerű ngAnimate-et használni az oldalátmenetek / animációk hozzáadásához a szögletes nézetekhez.



Az ngAnimate különféle irányelvekkel használható, például ngRepeat, ngView, ngInclude, ngIf, ngMessage stb.



keresési transzformáció az informatika példájában

Ebben a bejegyzésben animációkat fogunk használni az ngView alkalmazással

Itt az Adobe konzolok IDE-jét használjuk, de szabadon használhat másokat is, például a Sublime Text-et, a WebStorm-ot a JetBrains-tól stb.



Jegyzet : Ezenkívül a Bootswatch Bootstrap API-t is felhasználjuk, hogy HTML-oldalaink gyönyörű megjelenést kapjanak

Projekt felépítése:

Az alábbiakban bemutatjuk a IDE zárójelben található projekt felépítését



ngAnimate-angularjs-project-structure

Itt található a projektben használt fájlok rövid leírása

animation.css - fő CSS fájl, ahol meghatározzuk az oldal animációinkat

bootstrap.min.css - csizmás csizma a kezünkben gyönyörű megjelenést tagol

config.js - fő JavaScript fájl, ahol meghatározzuk szögletes modulunkat az útvonalakkal és a vezérlőkkel együtt

shellPage.html - Ez az a héjoldal, amelyre más nézetek dinamikusan töltődnek be

view1.html, view2.html, view3.html - Ezek a részleges nézetek töltődnek be a shellPage-be

Hogyan alkalmazzák az animációkat:

Az ngAnimate a CSS osztályokat különböző szögletes irányelvekre alkalmazza, attól függően, hogy belépnek vagy elhagyják a nézetet

.ng-enter - Ez a CSS osztály az irányelvre vonatkozik, amikor betölti az oldalra

.ng-szabadság - Ez a CSS osztály az irányelvre vonatkozik, amikor elhagyja az oldalt

Nézzük végig minden fájlt egyesével

shellPage.html

A shellPage betölti a szükséges erőforrásokat, alkalmazza az ng-app alkalmazást a törzsre, és hozzáadja az ng-nézetet a nézetek dinamikus injektálásához.

  

config.js

A config fájlban meghatározzuk szögletes modulunkat az útvonalakkal és a vezérlőkkel együtt.

A transitApp modulnak két függősége van: ngAnimate és ngRoute

var transitApp = szögletes.module ('transitApp', ['ngAnimate', 'ngRoute']) transitApp.config (function ($ routeProvider) {$ routeProvider .when ('/', {templateUrl: 'részek / nézet1.html' , vezérlő: 'view1Controller'})) .when ('/ view2', {templateUrl: 'partss / view2.html', controller: 'view2Controller'}) .when ('/ view3', {templateUrl: 'partss / view3. html ', controller:' view3Controller '})}}) pārejaApp.controller (' view1Controller ', function ($ hatókör) {$ scope.cssClass =' ​​view1 '}) transitApp.controller (' view2Controller ', function ($ hatókör) { $ scope.cssClass = 'view2'}) pārejaApp.controller ('view3Controller', függvény ($ hatókör) {$ scope.cssClass = 'view3'})

Három részmegtekintést definiáltunk (view1, view2, view3), amelyeket az URL-től függően injektálunk a shell oldalba. A megfelelő vezérlők beállítanak egy cssClass attribútumot, amely a CSS osztály neve, amelyet alkalmazni fognak az ng-nézetre. Ezekben a CSS osztályokban fogjuk meghatározni az animációinkat, amelyek minden oldalt különböző animációkkal töltenek be.

Részleges oldalak view1.html, view2.html, view3.html

Részoldalakban nincs sok minden, csak némi szöveg és link más nézetekre

view1.html

Ez az 1. nézet

2. nézet 3. nézet

view2.html

Ez a 2. nézet

1. nézet 3. nézet

view3.html

Ez a 3. nézet

1. nézet 2. nézet

Ne feledje, hogy ez a három HTML-fájl részleges oldal, amelyeket a shellPage.html fájlba kell injektálni, a config.js fájlban megadott URL-címnek megfelelően.

Stílusok és animációk meghatározása:

Tegyünk némi életet a nézeteinkbe a CSS alkalmazásával

.view {bottom: 0 padding-top: 200px position: abszolút szöveg-igazítás: center top: 0 width: 100%} .view a {margin-top: 50px} .view h1 {font-size: 60px} #heading { szín: # 333 pozíció: abszolút szöveg igazítás: középső felső: 50 képpont szélesség: 100%} / * Háttér és szöveg színei részleges nézet oldalakhoz (nézet1, nézet2, nézet3) ------------- ------------------------------------------------ * / .view1 {background: # bef2de color: # 00907c} .view2 {background: # D4D0EA color: # 55316f} .view3 {background: # FFCBA4 color: rgba (149, 95, 40, 0.91)}

A különböző nézetek közötti tiszta átmenet érdekében beállítjuk a CSS z-index tulajdonságot

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

Itt az ideje meghatározni az animációinkat

Dia bal oldali animáció

/ * csúsztassa ki balra * / @keyframes slideOutLeft {to {transform: translateX (-100%)}} @ -moz-keyframes slideOutLeft {to {-moz-transform: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {to {-webkit-transform: translateX (-100%)}}

Scale Up Animation

/ * nagyítás * / @ kulcskeretek scaleUp {{opacitás: 0,3 transzformáció: skála (0,8)}} @ -moz-keyframes skálaUp {{opacitás: 0,3 -moz-transzformáció: skála (0,8)}} @ -webkit- keyframes scaleUp {from {opacitás: 0,3 -webkit-transzformáció: skála (0,8)}}

Csúsztassa be a jobb animációt

/ * csúsztassa be a jobb oldali * / @keyframes slideInRight {értéket a {transform: translateX (100%)} értékről {transform: translateX (0)}} @ -moz-keyframes slideInRight {from {-moz-transform: translateX (100 %)} - {-moz-transform: translateX (0)}} @ -webkit-keyframes slideInRight {-tól {-webkit-transform: translateX (100%)} - {-webkit-transform: translateX (0)}}

Csúsztassa be az alsó animációt

/ * csúsztassa be az alját * ​​/ @keyframes slideInUp {a {transform: translateY (100%)} -ból {transform: translateY (0)}} @ -moz-keyframes slideInUp {from {-moz-transform: translateY (100 %)} - {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {from {-webkit-transform: translateY (100%)} - {-webkit-transform: translateY (0)}}

Forgatás és bukás animáció

/ * forgatás és esés * / @ -webkit-keyframes rotateFall {0% {-webkit-transform: rotateZ (0deg)} 20% {-webkit-transform: rotateZ (10deg) -webkit-animation-timing-function: easy- ki} 40% {-webkit-transform: rotateZ (17deg)} 60% {-webkit-transform: rotateZ (16deg)} 100% {-webkit-transform: translateY (100%) rotateZ (17deg)}} @ -moz -kulcskeretek rotateFall {0% {-moz-transform: rotateZ (0deg)} 20% {-moz-transform: rotateZ (10deg) -moz-animation-timing-function: relief-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% {transzformáció: rotateZ (10deg) animáció-időzítés-függvény: könnyű-kimenet} 40% {transzformáció: rotateZ (17deg)} 60% {transzformáció: rotateZ (16deg)} 100% {transzformáció: fordításY (100%) rotateZ (17deg)}}

Forgassa el az Újság animációt

/ * újság elforgatása * / @ -webkit-keyframes rotateOutNewspaper {to {-webkit-transform: translateZ (-3000px) rotateZ (360deg) átlátszatlansága: 0}} @ -moz-keyframes rotateOutNewspaper {to {-moz-transform: translateZ (-3000px) rotateZ (360deg) átlátszatlansága: 0}} @keyframes rotateOutNewspaper {to {átalakítás: translateZ (-3000px) rotateZ (360deg) átlátszatlanság: 0}}

Animációk alkalmazása:

Itt az ideje, hogy alkalmazzuk azokat az animációkat, amelyeket korábban definiáltunk

objektumok tömbje java-ban

1 animáció megtekintése

/ * Tekintse meg az 1 animációt az oldalhagyáshoz, és írja be a * / .view1.ng-leave {-webkit-animation: slideOutLeft 0.5s mindkettő könnyebb -moz-animation: slideOutLeft 0.5s mindkettő könnyen bejárható animáció: slideOutLeft 0.5s mindkettő könnyebb -in} .view1.ng-enter {-webkit-animation: scaleUp 0.5s, mindkettő easy-in -moz-animation: scaleUp 0.5s, mindkettő easy-in animáció: scaleUp 0.5s mindkettő easy-in}

2 animáció megtekintése

/ * Tekintse meg az 2 animációt az oldalhagyáshoz, és írja be a * / .view2.ng-leave {-webkit-transform-origin: 0% 0% -webkit-animation: rotateFall 1s mindkét könnyebb -moz-transform-origin: 0% 0% -moz-animation: rotateFall 1 mindkettő megkönnyíti a transzformáció eredetét: 0% 0% animáció: rotateFall 1s mindkét megkönnyíti a beillesztést} .view2.ng-enter {-webkit-animation: slideInRight 0.5s mindkettő könnyű beillesztés - moz-animation: slideInRight 0.5s mindkét könnyű animáció: slideInRight 0.5s mindkettő easy-in}

3 animáció megtekintése

/ * Nézzen meg 3 animációt az oldalhagyáshoz, és írja be a * / .view3.ng-leave {-webkit-transform-origin: 50% 50% -webkit-animation: rotateOutNewspaper .5s mindkét easy-in -moz-transform-origin: 50 % 50% -moz-animation: rotateOutNewspaper .5s mindkettő megkönnyíti a transzformáció eredetét: 50% 50% animation: rotateOutNewspaper .5s mindkettő easy-in} .view3.ng-enter {-webkit-animation: slideInUp 0.5s egyaránt megkönnyíti -in -moz-animation: slideInUp 0.5s mindkét könnyű animáció: slideInUp 0.5s mindkettő easy-in}

Minden változtatással készen vagyunk. Itt az ideje, hogy futtassa az alkalmazást

Az alkalmazás futtatása

Az alkalmazás futtatásakor az alábbi oldal jelenik meg:

Kattintson a linkekre, és animációkat láthat a játékban, a részleges oldalak belépésekor és elhagyásakor.

Számos egyéb animáció használható. A lehetséges hatások elsöprő sora itt lehet: http://tympanus.net/Development/PageTransitions/

Töltse le a kódot, és próbálja ki maga

[buttonleads form_title = 'Kód letöltése' redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text = 'Kód letöltése']

Remélem, tetszett a fenti animáció az ngAnimate bloggal. Ha mélyen bele akar merülni az Angular JS-be, akkor azt ajánlom, miért ne nézné meg a mi oldalunkat tanfolyam oldal. Az Edurekában található Angular JS tanúsító képzés az Angular JS szakértőjévé tesz Önnek élő oktatói vezetésű gyakorlatokon és gyakorlati képzésen, valós életben történő felhasználással.

Van egy kérdésünk? Kérjük, említse meg a megjegyzések részben, és mi kapcsolatba lépünk Önnel.

Kapcsolódó hozzászólások:

XML fájlok elemzése SAX elemző segítségével