AngularJS è un framework JavaScript supereroico che semplifica la creazione di applicazioni a pagina singola (SPA). Inoltre AngularJS viene fornito con una manciata di moduli angolari che possono essere utilizzati per creare un'esperienza utente fantastica. In questo post vedremo come utilizzare il popolare ngAnimate per aggiungere transizioni / animazioni di pagina alle viste angolari.
ngAnimate può essere utilizzato con varie direttive come ngRepeat, ngView, ngInclude, ngIf, ngMessage ecc.
In questo post useremo le animazioni con ngView
Qui stiamo usando Brackets IDE di Adobe, ma sei libero di usarne altri, ad esempio, Sublime Text, WebStorm di JetBrains ecc.
Nota : Useremo anche Bootswatch Bootstrap API per dare alle nostre pagine HTML un bell'aspetto
Struttura del progetto:
Di seguito è riportata la struttura del progetto in Brackets IDE
Ecco la breve descrizione di ogni file utilizzato nel progetto
animation.css - file CSS principale in cui definiamo le animazioni della nostra pagina
bootstrap.min.css - bootstrap bootswatch per aver dato il nostro contrassegna un bell'aspetto
config.js - file JavaScript principale in cui definiamo il nostro modulo angolare insieme a rotte e controller
shellPage.html - Questa è la pagina della shell in cui verranno caricate dinamicamente le altre viste
view1.html, view2.html, view3.html - Queste sono le viste parziali che verranno caricate nella shellPage
Come vengono applicate le animazioni:
ngAnimate applica le classi CSS a diverse direttive Angular a seconda che stiano entrando o uscendo dalla vista
.ng-invio - Questa classe CSS si applica alla direttiva ogni volta che viene caricata nella pagina
.ng-leave - Questa classe CSS si applica alla direttiva ogni volta che lascia la pagina
Esaminiamo ogni file uno per uno
shellPage.html
shellPage carica le risorse richieste, applica ng-app al corpo e aggiunge ng-view per iniettare dinamicamente le viste.
config.js
Nel file di configurazione, definiamo il nostro modulo angolare insieme a rotte e controller.
Il modulo TransitionApp ha due dipendenze: ngAnimate e ngRoute
var TransitionApp = angular.module ('TransitionApp', ['ngAnimate', 'ngRoute']) TransitionApp.config (function ($ 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'})Abbiamo definito tre viste parziali (view1, view2, view3) che verranno iniettate nella shellpage a seconda dell'URL. I rispettivi controller impostano un attributo cssClass, che è il nome della classe CSS, che verrà applicato alla visualizzazione ng. Definiremo le nostre animazioni in queste classi CSS che caricheranno ogni pagina con animazioni diverse.
Pagine parziali view1.html, view2.html, view3.html
chiamare per riferimento c ++
Non c'è molto nelle pagine parziali, solo del testo e link ad altre visualizzazioni
view1.html
Questa è la vista 1
Visualizza 2 Visualizza 3
view2.html
Questa è la vista 2
Visualizza 1 Visualizza 3
view3.html
Questa è la vista 3
Visualizza 1 Visualizza 2
Ricorda che questi tre file HTML sono pagine parziali che verranno iniettate in shellPage.html secondo l'URL che abbiamo definito nel file config.js
Definizione di stili e animazioni:
Mettiamo un po 'di vita nelle nostre opinioni applicandovi 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 { color: # 333 position: absolute text-align: center top: 50px width: 100%} / * Colori di sfondo e del testo per le pagine di visualizzazione parziale (view1, view2, view3) ------------- ------------------------------------------------ * / .view1 {background: # bef2de color: # 00907c} .view2 {background: # D4D0EA color: # 55316f} .view3 {background: # FFCBA4 color: rgba (149, 95, 40, 0.91)}Per effettuare una transizione pulita tra diverse viste, imposteremo la proprietà z-index CSS
.view.ng-leave {z-index: 9999} .view.ng-enter {z-index: 8888}Ora è il momento di definire le nostre animazioni
Animazione Slide Left
/ * slide out left * / @keyframes slideOutLeft {to {transform: translateX (-100%)}} @ -moz-keyframes slideOutLeft {to {-moz-transform: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {to {-webkit-transform: translateX (-100%)}}Animazione in scala
/ * scale up * / @keyframes scaleUp {from {opacity: 0.3 transform: scale (0.8)}} @ -moz-keyframes scaleUp {from {opacity: 0.3 -moz-transform: scale (0.8)}} @ -webkit- keyframes scaleUp {from {opacity: 0.3 -webkit-transform: scale (0.8)}}Scorri dall'animazione destra
/ * scorri da destra * / @keyframes slideInRight {from {transform: translateX (100%)} to {transform: translateX (0)}} @ -moz-keyframes slideInRight {from {-moz-transform: translateX (100 %)} a {-moz-transform: translateX (0)}} @ -webkit-keyframes slideInRight {da {-webkit-transform: translateX (100%)} a {-webkit-transform: translateX (0)}}Slide In from Bottom Animation
/ * slide in from the bottom * / @keyframes slideInUp {from {transform: translateY (100%)} to {transform: translateY (0)}} @ -moz-keyframes slideInUp {from {-moz-transform: translateY (100 %)} a {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {da {-webkit-transform: translateY (100%)} a {-webkit-transform: translateY (0)}}Ruota e cade l'animazione
/ * rotate and fall * / @ -webkit-keyframes rotateFall {0% {-webkit-transform: rotateZ (0deg)} 20% {-webkit-transform: rotateZ (10deg) -webkit-animation-timing-function: ease- 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: ease-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) animation-timing-function: ease-out} 40% {transform: rotateZ (17deg)} 60% {transform: rotateZ (16deg)} 100% {transform: translateY (100%) rotateZ (17deg)}}Ruota l'animazione del giornale
/ * rotate out journal * / @ -webkit-keyframes rotateOutNewspaper {to {-webkit-transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}} @ -moz-keyframes rotateOutNewspaper {to {-moz-transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}} @keyframes rotateOutNewspaper {to {transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}}Applicazione di animazioni:
È ora di applicare le animazioni che avevamo definito in precedenza
lunghezza dell'array in javascript
Visualizza 1 animazioni
/ * Visualizza 1 animazioni per la chiusura della pagina e invio * / .view1.ng-leave {-webkit-animation: slideOutLeft 0.5s both ease-in -moz-animation: slideOutLeft 0.5s both ease-in animation: slideOutLeft 0.5s both ease -in} .view1.ng-enter {-webkit-animation: scaleUp 0.5s both ease-in -moz-animation: scaleUp 0.5s both ease-in animation: scaleUp 0.5s both ease-in}Visualizza 2 animazioni
/ * Visualizza 2 animazioni per la chiusura della pagina e inserisci * / .view2.ng-leave {-webkit-transform-origin: 0% 0% -webkit-animation: rotateFall 1s both ease-in -moz-transform-origin: 0% 0% -moz-animation: rotateFall 1s both ease-in transform-origin: 0% 0% animation: rotateFall 1s both ease-in} .view2.ng-enter {-webkit-animation: slideInRight 0.5s both ease-in - moz-animation: slideInRight 0.5s sia con facilità di ingresso: slideInRight 0.5s sia con facilità di ingresso}Visualizza 3 animazioni
/ * Visualizza 3 animazioni per l'uscita della pagina e inserisci * / .view3.ng-leave {-webkit-transform-origin: 50% 50% -webkit-animation: rotateOutNewspaper .5s both ease-in -moz-transform-origin: 50 % 50% -moz-animation: rotateOutNewspaper .5s entrambi facilità di trasformazione-origine: 50% 50% animazione: rotateOutNewspaper .5s entrambi facilità-in} .view3.ng-enter {-webkit-animation: slideInUp 0.5s entrambi facilità -in -moz-animation: slideInUp 0.5s sia con facilità di animazione: slideInUp 0.5s sia con facilità}Abbiamo finito con tutte le modifiche. Ora è il momento di eseguire l'applicazione
Esecuzione dell'applicazione
Durante l'esecuzione dell'applicazione, ti verrà presentata la pagina seguente:
Clicca sui link e vedrai le animazioni in gioco, entrando e uscendo dalle pagine parziali.
Ci sono varie altre animazioni che possono essere utilizzate. Inoltre, una serie schiacciante di possibili effetti può essere qui: http://tympanus.net/Development/PageTransitions/
Scarica il codice e provalo tu stesso
[buttonleads form_title = 'Scarica codice' redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text = 'Scarica codice']
Spero ti sia piaciuta l'animazione di cui sopra con il blog ngAnimate. Se desideri approfondire Angular JS, ti consiglierei perché non dai un'occhiata al nostro pagina del corso. Il corso di certificazione Angular JS presso Edureka ti renderà un esperto in Angular JS attraverso sessioni dal vivo con istruttore e formazione pratica utilizzando casi d'uso reali.
Hai domande per noi? Per favore menzionalo nella sezione commenti e ti risponderemo.
Post correlati:
Analisi dei file XML utilizzando SAX Parser