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