Continuando con il nostro esercizio di animazione dalla parte precedente.
Aggiungeremo alcune altre animazioni alla nostra applicazione angolare.
In particolare, aggiungeremo un'animazione che verrà attivata
quando le modifiche del percorso si verificano all'interno della nostra applicazione a pagina singola.
Aggiungeremo anche un'animazione che consente di
visualizzare una vista quando i dati vengono recuperati dal lato server,
quindi quando stai respingendo lo spinner nella tua vista e quindi eseguendo il rendering della vista,
vogliamo che la vista venga proiettata sullo schermo
piuttosto che semplicemente apparendo tutto un improvvisa.
Quindi, un paio di nuove animazioni che aggiungeremo in questo esercizio.
Lungo la strada quando hai più animazioni nella tua applicazione,
potrebbe essere meglio refactoring il codice in un modo più
gestibile piuttosto che includere frammentario
ogni piccola parte di un trigger in ciascuno dei file all'
interno dei nostri componenti della nostra applicazione angolare.
Quindi, facciamo tutti questi passaggi come parte due dell'esercizio di animazione.
La prima cosa che ho intenzione di fare è che refactoring
il codice che abbiamo già fatto come parte uno di questo esercizio di animazioni.
Questo approccio che ti sto illustrando qui è solo il mio approccio suggerito.
Non devi necessariamente seguire esattamente in questo modo,
ma sento che questo aiuta a organizzare il codice molto meglio.
Quindi, quello che ho intenzione di fare è proprio come avevamo una cartella separata per i servizi,
avevamo una cartella separata per le risorse condivise e così via,
ho intenzione di creare una nuova cartella denominata animazioni.
Noi memorizzeremo tutto il codice relativo all'animazione lì e poi fare uso di esso importandolo
ovunque richiesto all'interno dei nostri componenti nella nostra applicazione angolare.
Quindi, andando al nostro codice,
all'interno della cartella dell'app creerò una nuova cartella e la chiamerò Animazioni.
All' interno di questa cartella Animations,
creerò un nuovo file e per mancanza di una parola migliore
lo chiamerò app.animation.ts file.
Quindi all'interno di questo, ho intenzione di importare
le varie classi da animazioni angolari che ho fatto nel componente DishDetail.
Quindi, andando al componente DishDetail,
ricorderai che la prima cosa che ho fatto
è stata ho aggiunto questa riga nel componente DishDetail.
Ho intenzione di ritagliarlo dal componente DishDetail e
invece incollarlo nelle animazioni dell'app, in
modo che ovunque queste animazioni dell'app siano
incluse importandole nei nostri altri componenti,
questo verrà automaticamente per il giusto lì.
Ora, all'interno di questa app animazioni,
ho intenzione di creare alcune funzioni di fabbrica che esporteranno i vari trigger.
La prima funzione di fabbrica che creerò
questa funzione di esportazione e la chiamerò visibilità.
Questa funzione di visibilità restituirà il codice
corrispondente al trigger che abbiamo fatto nel componente DishDetail.
Quindi, tornando al componente DishDetail,
ho intenzione di ritagliare l'intero codice per il trigger da qui e poi tornare al
file animation.ts app e quindi incollarlo in
posizione proprio lì nella funzione qui.
Questo ora diventa una funzione che è disponibile per l'importazione dal mio componente DishDetail.
Quindi, tornando al componente DishDetail.
Ora, nel posto in cui ho importato il trigger e altre classi,
ora importerò la visibilità
dall'app dell'animazione, dall'animazione
e in modo che la funzione diventi ora disponibile per me all'interno del mio codice qui.
Quindi, una volta che lo faccio all'interno delle mie animazioni,
posso semplicemente chiamare quella funzione in modo da poter dire
visibilità e quindi il codice trigger ora diventa parte del mio componente qui.
Ora, questo trovo sia un modo migliore di organizzare il codice per le mie animazioni.
Ora, se ho bisogno di usare lo stesso trigger in un altro componente,
posso semplicemente seguire questo approccio per includerlo anche nei miei altri componenti.
Salviamo le modifiche e poi andiamo a dare
un'occhiata veloce alla nostra applicazione nel browser.
Vai nel browser, vedi che quando vado al componente del disco,
il componente del disco è proprio lì e poi
avrà lo stesso comportamento di animazione di prima.
Quindi, refactoring del codice,
sono riuscito a ottenere il codice meglio organizzato e
lavorare esattamente allo stesso modo come parte uno di questo esercizio.
Se hai usato solo una singola animazione in un unico posto,
l'approccio precedente funziona bene, ma se ne hai
più e soprattutto se stai riutilizzando il codice in molti componenti,
allora questo approccio refactored è un modo molto migliore per implementare la soluzione.
Il prossimo aggiornamento che ho intenzione di fare è aggiungere animazioni sui cambiamenti di rotta.
Quindi, quando passo da una vista a un'altra, quindi, ad esempio,
da casa a circa o in procinto di menu o menu per contattare o viceversa,
allora voglio essere in grado di animare queste modifiche all'interno della mia applicazione.
Quindi, per farlo,
introdurrò un'altra funzione nel file animation.ts dell'app.
Quindi, entrando nel file animation.ts dell'app,
esporterò un'altra funzione che chiamo come FlyInOut,
vedrai perché uso questo nome qui.
Quindi questo restituirebbe una funzione che è un trigger con il nome flyInOut.
Quindi, all'interno era trigger,
ho intenzione di definire il codice per ciò che questo trigger sta per fare.
Quindi, qui, definirò uno stato qui con la stella del nome,
quindi non importa quale stato sia,
questo è applicabile a qualsiasi stato e poi definirò
alcuni stili qui e i due stili che
definirò è l'opacità è uno
e la trasformazione è TransLatex (0),
quindi il che significa che è nella sua posizione normale in questo caso.
Ora, quando definisco le transizioni,
posso anche definire le transizioni in questo modo.
Quindi, se dico enter transition,
la transizione enter è una scorciatoia per dire che va dallo
stato vuoto a uno dello stato esistente.
Quindi, il che significa che la vista sta entrando nella mia applicazione.
Quindi inserisci, il che significa che ora quando instraderò in
una vista particolare nella mia applicazione a pagina singola,
quella vista entrerà nella vista.
Quindi, è per questo che posso applicare la transizione tra i due punti in quel caso.
Ora allo stesso modo, c'è un'altra transizione chiamata
congedo dei due punti che posso applicare quando si passa da
questa vista e quindi si sta prendendo la vista dalla presa del router della propria applicazione.
Quindi, faremo entrambi entrare e l'altro che è lasciare.
Quindi, due funzioni che ho intenzione di definire qui,
transizione entrare e transizione lasciare qui.
Quindi, per l'invio,
cosa voglio definire?
Per entrare, lasciami definire la funzione qui,
e allo stesso modo, anche per lasciare,
ho intenzione di definire le funzioni qui.
Quindi, creando questa impalcatura qui.
Ora, posso inserire le informazioni che voglio all'interno di queste transizioni.
Quindi, quando si verifica questa transizione,
inizierò con uno stile di trasformazione,
TransLatex meno 100 percento,
il che significa che la vista è completamente fuori dalla vista qui.
Quindi, si parte da meno 100 per cento in questo momento.
Quindi, quando stai entrando,
inizierai con quello,
e poi anche a questo punto
, animerò e animerò in 500.
Quindi, quando specifico 500 in questo modo,
puoi anche farlo in questo modo.
In alternativa, puoi dire, tra virgolette,
«500ms», e quindi puoi persino usare ease-in o ease-out.
Quindi, lasciami modificare questo in
500ms ease-in perché questa vista sta arrivando.
Quindi, ci faciliteremo la vista.
Quindi, per congedo, applicherò la transizione come animata,
e poi direi 500 millisecondi, ancora una volta, ease-out.
Quindi, questo punto di vista se ne va.
Quindi, vogliamo facilitare questa vista.
Quindi, in questo caso,
lo stile che applico
è la trasformazione,
TransLatex al 100%.
Quindi, questa vista scomparirà completamente dallo schermo lì.
TransLatex al 100%.
Inoltre, imposterò l'opacità su zero.
Quindi, scompare completamente dallo schermo.
Quindi, questa animazione aggiungerà una buona nuova funzionalità qui.
Ora, anche per questo,
posso aggiungere, iniziando con un'opacità di zero, se preferisci.
Aggiungiamolo e vediamo come appare.
Quindi, questo è il trigger FlyInOut che ho definito qui.
Ora, ti stai ovviamente chiedendo,
come faccio a utilizzare questo FlyInOut e quindi applicarlo per
instradare le transizioni nella mia applicazione?
Quindi, per farlo, andremo a, in primo luogo,
iniziando con il file component.ts del menu.
Ho intenzione di importare
FlyInOut
dall'animazione dell'app.
Quindi, andando al componente,
ho intenzione di introdurre una nuova proprietà chiamata come host.
Ti dirò cosa andra' in ospite tra poco.
Quindi, includeremo anche la proprietà animazioni,
che è una matrice qui.
Poi, qui dentro, userò il FlyInOut che abbiamo appena importato.
Quindi, questo trigger di animazione verrà applicato per questo componente multimediale.
Ora, all'interno dell'host,
quindi questo è il modo in cui garantisco che questa particolare animazione avvenga quando si verificano cambiamenti di percorso.
Quindi, all'interno di questo host qui,
fornisco questo come dicendo,
@flyInOut e dico vero,
e questo dovrebbe essere racchiuso tra virgolette anche,
@flyInOut, true, e quindi stile,
blocco di visualizzazione.
Quindi, questi due dovrebbero essere applicati all'interno della proprietà host qui.
Ora, quando lo facciamo, il mio componente menu inizierà ad animarsi
quando instraderò nel componente menu,
e poi anche quando lascio il componente menu.
Ora, applicherò la stessa cosa ai restanti componenti della mia applicazione Angular.
Quindi, quello che farò è,
mi limiterò a copiare questo,
e poi lo applicheremo al componente about.
Quindi, andrò al componente about.
All' interno del decoratore dei componenti,
ho incluso le informazioni qui
e vedi la linea rossa ondulata che mi ricorda che ho bisogno di importare
FlyInOut da animazioni, animazioni dell'app.
Quindi, lo stesso approccio, sul componente,
quindi all'interno del componente di contatto anche, la stessa cosa,
e quindi applicare le proprietà host e animazione al decoratore del componente,
e poi cos'altro abbiamo?
Il componente di casa. Andiamo al componente di casa e ripetiamo la stessa cosa qui.
Aggiungerò l'host e la proprietà delle animazioni,
quindi andrò avanti e importerò
FlyInOut, dall'animazione dell'app.
Ne abbiamo persi qualcuna? Oh, dobbiamo anche aggiornare il componente del dettaglio del piatto.
Quindi, lasciami andare al componente dettaglio piatto.
Dal momento che abbiamo già la visibilità lì,
ho intenzione di importare il FlyInOut.
Quindi, dal momento che abbiamo già impostato le parti rimanenti qui,
ho intenzione di entrare e incollare quel codice,
e ovviamente, ho due animazioni qui.
Lasciami tagliare la visibilità da qui e poi
aggiungerla nell'altra animazione,
quindi tagliarla in modo da avere una singola proprietà di animazione con
entrambe le funzioni flyInOut e visibilità sia incluse che chiamate lì,
e quindi la proprietà host.
Ora, salviamo le modifiche e diamo un'occhiata
alla nuova animazione che abbiamo appena applicato ai nostri componenti.
A partire dalla vista iniziale.
Quindi, abbiamo la vista home che viene renderizzata qui.
Permettetemi ora di passare rapidamente alla visualizzazione Informazioni
e quindi si vede che la visualizzazione Info scorre solo in mentre
la visualizzazione Home scorre fuori nello schermo qui.
Allo stesso modo, quando si accede al menu,
si vedrà che la visualizzazione Menu scorre mentre la vista Info scorre fuori.
E' cosi' veloce che non te ne accorgi come tale.
Analogamente, per la vista Contatto,
viene visualizzata la vista contatto scorrevole.
Quindi, questo tipo di animazione può essere aggiunto utilizzando
questo approccio che abbiamo appena illustrato per la vostra applicazione Angular.
Non abbiamo ancora finito. Faremo un'altra animazione all'interno della nostra applicazione.
Per illustrare cosa mi piacerebbe fare nella prossima animazione,
diamo un rapido orologio sul componente menu.
Quindi, si vede che quando il componente
del menu, quando lo spinner gira e poi viene sostituito dalla vista,
la vista appare improvvisamente sullo schermo,
ed è un po 'strillante per l'occhio.
Potresti non accorgertene.
Potresti esserne abbastanza felice.
Ma possiamo aggiungere in un modo di allentamento in
quella vista quando i dati vengono recuperati dal server e la vista viene renderizzata.
Quindi, quando la variabile del piatto nel mio file component.ts del menu non viene annullata,
allora lo spinner sarà nascosto e quindi la vista del piatto,
il menu viene costruito e quindi disposto.
Quindi, vogliamo che entri nello schermo.
Quindi, aggiungiamo un'altra animazione per effetto che sia nel componente menu.
Applicheremo anche la stessa cosa nel componente dettaglio piatto.
Useremo anche lo stesso nel componente Home anche e il componente About,
dove stiamo recuperando i dati per mostrare l'elenco dei leader.
Quindi, ovunque tu stia recuperando i dati dal server e quindi disponendo
la vista, quando appare
la vista, vogliamo facilitare la vista usando questa nuova animazione che creerò successivamente.
Andando al file animation.ts dell'app,
aggiungerò un'altra funzione qui
e lasciatemi chiamare expand.
Questa funzione espanderà la vista che viene
disposta dopo che i dati sono stati recuperati dal lato server.
Quindi, questa vista, ancora una volta,
restituirò un trigger qui.
Nominerò il trigger come espandi
e questo trigger creerà.
Come definiamo questo trigger.
Quindi, all'interno di questo grilletto includeremo uno stato con una stella.
Quindi, non importa quale stato sia.
Tutti gli stati saranno renderizzati con lo stile come
opacità una trasformazione traduci x 0.
Quindi, viene visualizzato a destra e al centro nella mia applicazione.
Quello dovrebbe essere un tutore.
Lo guardavo e gli dissi: «
Perché mostra una linea rossa strisciante.
Quindi, quando si digita molto velocemente, spesso si commettono errori lì.
Quindi, invece di una parentesi quadra,
quella dovrebbe essere una parentesi graffa lì.
Quindi, questo è lo stato.
Quindi, qualsiasi stato che sarà completamente visibile e centrato dove dovrebbe essere centrato.
Ora, lasciatemi innescare una transizione.
Ora, questa transizione verrà attivata solo
all'invio quando la vista è disposta sullo schermo.
La parte di uscita che stiamo già facendo nell'animazione del percorso, quindi non ne abbiamo bisogno.
Abbiamo solo bisogno dell'inter part per questa vista perché
la vista è renderizzata su questo schermo lì.
Quindi, nell'invio,
definirò la transizione in modo appropriato.
Quindi, nella transizione cosa voglio fare?
Voglio applicare lo stesso approccio che ho usato con la transizione enter qui.
Quindi, ho intenzione di copiare questo e poi apportare alcune piccole modifiche al codice lì.
Quindi, anche per la transizione enter qui,
voglio applicare la stessa cosa.
Dirò tradurre Insta dal 100 per cento.
Ho intenzione di usare solo il 50 percento e poi farò la traduzione Y.
Quindi, il che significa che questa vista scenderà dal primo 50 precent a partire da
opacità zero e poi lo faciliterò in un tempo un po 'più veloce,
200 millisecondi e lo faciliterà nella nostra applicazione.
Ora, quindi, vedi il piccolo aggiustamento al codice qui.
Quindi, traduci meno 50 percento e opacità zero ed
è facilitato in 200 millisecondi e poi a quel punto,
posso applicare questo stile come lo stesso stile.
Mi candidero' li'. Quindi, copierò quello stile e poi applicherò quello stile lì.
Quindi, quando è facilitato,
entrerà e sarà completamente visibile dove dovrebbe essere.
Quindi, questa è la funzione di espansione che ho definito qui.
Quindi, dove voglio utilizzare questa funzione?
Andremo prima al componente del menu e all'interno del componente del menu,
ora anche importarlo,
espandere e poi aggiungerlo nelle mie animazioni e poi come faccio ad applicare questa espansione?
Quindi, andando a quel file di modello dei componenti del menu.
Nel file modello,
applicherò l'espansione all'
elenco della griglia in cui sto applicando questo.
Quindi, lasciami copiare e poi anche andremo
al componente di casa e all'interno del componente di casa anche,
Ho intenzione di includere l'espansione e quindi aggiungere l'espansione per l'animazione,
e poi andare al file di modello componenti di casa e poi applicherò
che espandere i componenti del piatto MD scheda,
ai componenti di promozione scheda MD e anche ai
componenti leader scheda MD qui perché tutti questi
tre saranno recuperati in futuro dal server e quindi renderizzati.
Quindi, i dati dei componenti del piatto sono già stati recuperati dal server.
Ora, la stessa cosa va al componente DishDetail.
Ho intenzione di aggiungere l'espansione alle importazioni e quindi aggiungere
un'espansione nell'animazione andando alla vista del componente DishDetail.
Insieme a una visibilità,
applicherò anche l'espansione
alla scheda div lì e poi ai commenti div anche qui.
Questo è nel componente DishDetail.
Il componente di contatto non ha nulla che viene recuperato dal server.
Quindi, andrò semplicemente al componente about e nel componente about anche,
includerò l'espansione e anche nelle animazioni.
Andando al file del modello sui componenti qui questo test
qui che mostra i leader vengono recuperati dal lato server.
Quindi, ho intenzione di applicare l'espansione su questo.
Salviamo le modifiche e poi andiamo a
dare un'occhiata alla nostra applicazione angolare nel browser.
Andando alla nostra applicazione angolare.
Ora, quando si entra nel modello di casa,
si può vedere che le carte quando sono stati recuperati,
sono scivolati nella mia vista lì.
Ora, allo stesso modo quando si va al componente about,
si vede che una volta che i dati vengono recuperati dal server,
allora il rendering dei vari leader viene fatto
scorrere sempre così lentamente in posizione in questa vista qui.
Allo stesso modo, andando al componente menu,
vedremo uno stesso comportamento qui.
Quindi, una volta che i dati del menu sono pronti,
il componente del menu scorre in posizione proprio lì.
Stessa cosa con i componenti del piatto.
Quindi, lasciami andare al componente DishDetail e vedrai che
la vista scorre in posizione lì, ma l'
altra animazione che stava
scomparendo e riapparendo quella parte funziona ancora come prima.
Quindi, vedete che abbiamo introdotto un'altra animazione nella nostra applicazione angolare.
Ora, che ti piaccia o vuoi fare un modo più elaborato di fare animazioni,
certamente, puoi impazzire
facendo molti tipi diversi di cose con la tua animazione.
Modifica di molte proprietà diverse all'interno degli stili come in che modo ti piace e così via.
Ma ho sentito che alcune sottili animazioni qua e là
contribuiranno a migliorare l'interfaccia utente per la mia applicazione angolare.
Quindi, ho aggiunto altre due nuove animazioni alla mia applicazione Angular.
Con questo, completiamo la seconda parte del nostro esercizio di animazioni.
Spero che con queste due parti di esercizio,
tu abbia capito meglio su come utilizzare le
animazioni all'interno della tua applicazione Angular.
Questo è un buon momento per fare un commit git con il messaggio, animazioni parte due.