AngularJS je superherojski JavaScript okvir koji olakšava stvaranje aplikacija s jednom stranicom (SPA). Povrh toga, AngularJS dolazi s pregršt kutnih modula koji se mogu koristiti za stvaranje izvrsnog korisničkog iskustva. U ovom ćemo postu vidjeti kako koristiti popularni ngAnimate za dodavanje prijelaza / animacija stranice u kutne poglede.
ngAnimate se može koristiti s raznim direktivama poput ngRepeat, ngView, ngInclude, ngIf, ngMessage itd.
U ovom postu koristit ćemo animacije s ngViewom
Ovdje koristimo Bracket IDE tvrtke Adobe, ali slobodno možete koristiti i druge, na primjer, Sublime Text, WebStorm iz JetBrains itd.
Bilješka : Također ćemo koristiti Bootswatch Bootstrap API kako bismo našim HTML stranicama dali lijep izgled
Struktura projekta:
Ispod je struktura projekta u zagradama IDE
Evo kratkog opisa svake datoteke koja se koristi u projektu
animacija.css - glavna CSS datoteka u kojoj definiramo animacije naše stranice
bootstrap.min.css Bootstrap za davanje naših označava prekrasan izgled
config.js - glavna JavaScript datoteka u kojoj definiramo naš kutni modul zajedno s rutama i kontrolerima
shellPage.html - Ovo je stranica ljuske u kojoj će se ostali pogledi dinamički učitavati
razvrstati niz c ++
view1.html, view2.html, view3.html - Ovo su djelomični prikazi koji će se učitati u shellPage
Kako se primjenjuju animacije:
ngAnimate primjenjuje CSS klase na različite Angular direktive, ovisno o tome ulaze li ili izlaze iz prikaza
.ng-enter - Ova CSS klasa primjenjuje se na direktivu kad god se učita na stranici
.ng-dopust - Ova CSS klasa primjenjuje se na direktivu kad god napusti stranicu
Prođimo svaku datoteku jednu po jednu
shellPage.html
shellPage učitava potrebne resurse, primjenjuje ng-app na tijelo i dodaje ng-view za dinamičko ubrizgavanje pogleda.
config.js
U konfiguracijskoj datoteci definiramo naš kutni modul zajedno s rutama i kontrolerima.
Modul prijelazApp ima dvije ovisnosti: ngAnimate i ngRoute
var prijelazApp = angular.module ('prelazApp', ['ngAnimate', 'ngRoute']) prelazApp.config (funkcija ($ routeProvider) {$ routeProvider .when ('/', {templateUrl: 'partials / view1.html' , kontroler: 'view1Controller'}) .when ('/ view2', {templateUrl: 'partials / view2.html', kontroler: 'view2Controller'}) .when ('/ view3', {templateUrl: 'partials / view3. html ', kontroler:' view3Controller '})}) prelazApp.controller (' view1Controller ', funkcija ($ opseg) {$ scope.cssClass =' view1 '}) prelazApp.controller (' view2Controller ', funkcija ($ opseg) { $ scope.cssClass = 'view2'}) prijelazApp.controller ('view3Controller', funkcija ($ opseg) {$ scope.cssClass = 'view3'})Definirali smo tri djelomična prikaza (pogled1, pogled2, pogled3) koji će se ubrizgati u školjku, ovisno o URL-u. Odgovarajući kontrolori postavljaju cssClass atribut, koji je naziv CSS klase, koji će se primijeniti na ng-pogled. Naše ćemo animacije definirati u ovim CSS razredima koji će svaku stranicu učitati različitim animacijama.
Djelomične stranice view1.html, view2.html, view3.html
Na djelomičnim stranicama nema ništa posebno, samo neki tekst i poveznica na druge poglede
pogled1.html
Ovo je Pogled 1
Pogled 2 Pogled 3
view2.html
Ovo je Pogled 2
Pogled 1 Pogled 3
view3.html
Ovo je Pogled 3
Pogled 1 Pogled 2
Imajte na umu da su ove tri HTML datoteke djelomične stranice koje će se ubrizgati u shellPage.html prema URL-u koji smo definirali u datoteci config.js
Utvrđivanje stilova i animacija:
Primijenimo CSS na svoje stavove
.view {dno: 0 padding-top: 200px pozicija: apsolutno poravnanje teksta: center top: 0 width: 100%} .view a {margin-top: 50px} .view h1 {font-size: 60px} #heading { boja: # 333 pozicija: apsolutno poravnanje teksta: središnji vrh: 50px širina: 100%} / * Boje pozadine i teksta za stranice s djelomičnim prikazom (pogled1, pogled2, pogled3) ------------- ------------------------------------------------ * / .view1 {background: # bef2de color: # 00907c} .view2 {background: # D4D0EA color: # 55316f} .view3 {background: # FFCBA4 color: rgba (149, 95, 40, 0.91)}Da bismo izvršili čisti prijelaz između različitih pogleda, postavićemo svojstvo CSS z-index
.view.ng-leave {z-index: 9999} .view.ng-enter {z-index: 8888}Sada je vrijeme da definiramo naše animacije
Klizajte lijevo
/ * pomaknite se lijevo * / @keyframes slideOutLeft {za {transformiranje: translateX (-100%)}} @ -moz-keyframes slideOutLeft {za {-moz-transform: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {do {-webkit-transform: translateX (-100%)}}Povećaj animaciju
/ * povećaj * / @keyframes scaleUp {od {neprozirnost: 0,3 transformacija: skala (0,8)}} @ -moz-keyframes scaleUp {od {neprozirnost: 0,3 -moz-transformacija: skala (0,8)}} @ -webkit- ključni okviri scaleUp {od {opacity: 0,3 -webkit-transform: scale (0.8)}}Kliznite s desne animacije
/ * klizajte zdesna * / @keyframes slideInRight {od {transform: translateX (100%)} do {transform: translateX (0)}} @ -moz-keyframes slideInRight {od {-moz-transform: translateX (100 %)} u {-moz-transform: translateX (0)}} @ -webkit-keyframes slideInRight {iz {-webkit-transform: translateX (100%)} u {-webkit-transform: translateX (0)}}Slide In from Bottom Animation
/ * kliznite od dna * / @keyframes slideInUp {od {transform: translateY (100%)} do {transform: translateY (0)}} @ -moz-keyframes slideInUp {od {-moz-transform: translateY (100 %)} u {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {iz {-webkit-transform: translateY (100%)} u {-webkit-transform: translateY (0)}}Okreni i pada Animacija
/ * zakretanje i pad * / @ -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: rotateZ (10deg) animacija-timing-function: easy-out} 40% {transform: rotateZ (17deg)} 60% {transform: rotateZ (16deg)} 100% {transform: translateY (100%) rotirajZ (17deg)}}Rotirajte novinsku animaciju
/ * rotiranje novina * / @ -webkit-keyframes rotateOutNewspaper {to {-webkit-transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}} @ -moz-keyframes rotateOutNewspaper {to {-moz-transform: translateZ (-3000px) rotateZ (360deg) neprozirnost: 0}} @keyframes rotateOutNewspaper {to {transform: translateZ (-3000px) rotateZ (360deg) prozirnost: 0}}Primjena animacija:
Vrijeme je da primijenimo animacije koje smo prije definirali
Pogledajte 1 animaciju
/ * Pogledajte 1 animaciju za napuštanje stranice i unesite * / .view1.ng-leave {-webkit-animation: slideOutLeft 0,5s, obje jednostavnosti-u -moz-animaciji: slideOutLeft 0,5s, obje animacije jednostavnosti: slideOutLeft 0,5s -in} .view1.ng-enter {-webkit-animacija: scaleUp 0,5s oboje-u -moz-animacija: scaleUp 0,5s i jednostavan animacija: scaleUp 0,5s i jednostavan}Pogledajte 2 animacije
/ * Pogledajte 2 animacije za napuštanje stranice i unesite * / .view2.ng-leave {-webkit-transform-origin: 0% 0% -webkit-animacija: rotateFall 1s i jednostavan-u-moz-transform-origin: 0% 0% -moz-animacija: rotateFall 1s i jednostavan pretvorbeni izvor: 0% 0% animacija: rotateFall 1s i jednostavan} .view2.ng-enter {-webkit-animacija: slideInRight 0.5s, jednostavan - moz-animacija: slideInRight 0,5s, obje animacije jednostavnosti: slideInRight 0,5s, obje jednostavnosti}Pogledajte 3 animacije
/ * Pogledajte 3 animacije za napuštanje stranice i unesite * / .view3.ng-leave {-webkit-transform-origin: 50% 50% -webkit-animacija: rotateOutNewspaper .5s i easy-in -moz-transform-origin: 50 % 50% -moz-animacija: rotateOutNewspaper .5s i jednostavan pretvarajući izvor: 50% 50% animacija: rotateOutNewspaper .5s i jednostavan} .view3.ng-enter {-webkit-animation: slideInUp 0.5s obje lakoće -in -moz-animacija: slideInUp 0,5s, i animacija jednostavnosti: slideInUp 0,5s, i easy-in}Završili smo sa svim promjenama. Sada je vrijeme za pokretanje aplikacije
Pokretanje aplikacije
Pri pokretanju aplikacije prikazat će vam se donja stranica:
Kliknite na poveznice i vidjet ćete animacije u igri, pri ulasku i napuštanju djelomičnih stranica.
Postoje razne druge animacije koje se mogu koristiti. Također, ovdje može biti i ogroman skup mogućih učinaka: http://tympanus.net/Development/PageTransitions/
Preuzmite kod i isprobajte sami
[buttonleads form_title = ”Preuzmi kod” redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text = ”Preuzmi kod”]
Nadam se da vam se svidjela gornja Animacija s ngAnimate blogom. Ako želite duboko zaroniti u Angular JS, preporučio bih vam zašto ne biste pogledali naš stranica tečaja. Obuka za Angular JS certificiranje u Edureki učinit će vas stručnjakom za Angular JS kroz sesije pod vodstvom instruktora uživo i praktični trening koji koristi slučajeve stvarne upotrebe.
Imate pitanje za nas? Molimo spomenite to u odjeljku za komentare i javit ćemo vam se.
Vezane objave:
Raščlanjivanje XML datoteka pomoću SAX Parsera