[MUSIC]
Come abbiamo appreso nella lezione precedente,
le animazioni aggiungono un sacco di valore intrinseco alla tua applicazione.
Si aggiunge ad una migliore esperienza utente.
Ora, ovviamente, questo non significa che si gettano animazioni dappertutto
solo per il gusto di fare animazioni.
Metti le animazioni in atto per rendere l'esperienza dell'utente migliore.
In questo esercizio faremo la nostra prima animazione
all'interno della nostra applicazione Angular che abbiamo sviluppato finora.
E lungo la strada,
impara come le animazioni possono essere implementate in un'applicazione Angular.
Continueremo questo thread nella seconda parte dell'esercizio dove
aggiungeremo altre animazioni alla nostra applicazione Angular.
Quando abbiamo iniziato questo corso, nel primo esercizio con Angular,
avevamo già aggiunto il modulo di animazione nella nostra applicazione Angular
in app.module.ts5, quindi abbiamo importato il modulo di animazione proprio lì.
Ora il passo successivo è quello di andare ai componenti e
quindi aggiungere l'animazione ovunque sia richiesto.
La prima animazione che stiamo per aggiungere è nel componente dishdetail qui.
Quindi, andando al componente dishdetail,
fammi importare alcune classi qui.
Importerò trigger, stato
, stile, animazione e transizione da.
@angular /animations.
Ora, una volta importate queste possiamo fare uso di queste per costruire la nostra animazione.
Quindi, come si aggiunge l'animazione a un componente?
Aggiungeremo i trigger di animazione nel decoratore componente qui.
Quindi andando nel decoratore del componente dopo gli URL degli stili
e aggiungi le animazioni come proprietà all'interno di lì.
E poi qui dentro, definirò un trigger,
che chiamo come trigger di visibilità, e
definirò il trigger di visibilità qui dentro.
Ora, per questo trigger di visibilità,
definirò due stati, definirò uno
stato come mostrato e definirò un secondo stato
come, Nascosto.
Quindi ho la flessibilità di definire i miei stati in questo modo.
Quindi, per lo stato mostrato, cos'è che voglio applicare?
Quindi, per lo stato mostrato, applicherò lo stile come segue,
quindi gli stili che applicherò per
lo stato mostrato, farò la trasformazione e
la trasformazione che applicherò è una scala di 1.0.
Quindi voglio mostrarlo nella
sua dimensione normale e
un'opacità di 0.
Quindi questo è il modo in cui definisco lo stile mostrato.
Quindi, e lo stato nascosto definisco lo stile come,
Trasforma, dirò scala (0.5).
Puoi giocare con questi numeri
per vedere se l'animazione è ciò che desideri.
Ho anche giocato con questi numeri fino a quando ho ottenuto qualcosa di cui ero
soddisfatto.
E 0, o per il loro ulteriore stato mostrato, metterò l'opacità come 1.
Opacità 1 significa che è completamente visibile.
Opacità 0 significa che è completamente nascosto.
Ora, ho definito due stati qui, mostrati e qui nello stato.
Ora, la transizione tra questi due stati,
definirò qui come, ogni volta che mi sposto da qualsiasi stato a qualsiasi stato,
non importa quale stato in quale stato mi muovo,
la trasformazione viene eseguita con animazione di 0,5 secondi,
o 500 millisecondi.
E io mi allenterò.
Quindi qui, quello che sto specificando è che se mi sposto dallo stato mostrato allo stato
nascosto o dallo stato nascosto allo stato mostrato, mi muoverò entro 0,5 secondi o 500 millisecondi.
E poi, farò la transizione allentando dentro e fuori,
quindi non sarà una transizione lineare, entrerà lentamente e
poi entrerà e poi faciliterà la transizione, in modo
che non sarà una transizione a scatti da una all'altra.
In questo modo è possibile utilizzare questa facilità di inserimento o facilità di uscita o ease-in-out
per specificare come si desidera che la transizione avvenga.
Quindi ora per questa animazione, ho specificato
la visibilità come trigger per questa animazione.
Ora per abilitare questa animazione per funzionare correttamente,
entrerò nel mio DishDetailComponent e quindi specificherò,
all'interno di questo componente, il valore iniziale per la visibilità.
Quindi, dirò che la visibilità è
inizialmente impostata su mostrata, e poi,
ogni volta che sto cambiando da un piatto all'altro.
E questo succede ogni volta che prendo il piatto qui.
Quindi ogni volta che cambio il piatto da un piatto all'altro,
questo è causato ogni volta che cambia il parametro del percorso.
Quindi, a quel punto, ho intenzione di applicare l'animazione.
Farò passare il grilletto dallo stato mostrato allo stato nascosto e
poi di nuovo dallo stato nascosto allo stato mostrato quando il piatto è disponibile.
Quindi per applicare quella trasformazione.
Quindi ho intenzione di racchiudere questa dichiarazione all'interno di
un blocco qui in questa funzione freccia.
E poi definire anche questa visibilità qui come.
Quindi, quando sto passando da uno stato all'altro, così
come comincio a recuperare le informazioni del piatto dal lato server,
prima nasconderò il piatto corrente impostando il
valore di visibilità su nascosto, il che significa che il piatto corrente che
viene visualizzato sarà nascosto dalla vista.
E poi, quando il nuovo piatto sarà disponibile, tornerà alla vista.
Quindi, per farlo, quando il mio piatto diventa disponibile nella seconda parte,
nella parte di sottoscrizione, dirò come ultima affermazione in quel blocco,
dirò che questa visibilità è uguale a quella mostrata qui.
Quindi la mia visione diventa visibile a quel punto.
Ora non sto applicando questo al messaggio di errore perché
applicherò questa visibilità solo a quelle parti del mio
modello in cui viene effettivamente mostrato il mio piatto.
Ora, se c'è un errore, allora voglio solo nascondere il piatto corretto.
Quindi, mostra solo il messaggio di errore nella vista lì.
Quindi, con queste modifiche al mio DishDetailComponent.
Quindi, puoi vedere di nuovo, spiegando questo in esso un'altra volta.
Quando inizierò il recupero del nuovo piatto dopo la modifica dei parametri del percorso,
imposterò la visibilità su nascosta in modo
che il piatto corrente che viene visualizzato nella vista si nasconda da solo.
E poi quando il nuovo piatto diventa disponibile, in modo che accadrà quando
l'abbonamento viene chiamato quando quell'osservabile diventa disponibile.
E poi, quando il piatto diventa disponibile e poi,
ho impostato questo piatto al piatto che è tornato dall'osservabile.
A quel punto, ripristinerò la visibilità a quello stato mostrato.
Quindi, che il mio nuovo piatto che ho recuperato può essere mostrato sullo schermo.
Con questa modifica, ora vado al file modello
e all'interno del file modello applicherò
la visibilità a entrambi i piatti qui.
Quindi il primo div in cui sto visualizzando il piatto
applicherò il trigger, Visibilità al piatto.
E poi lo imposterò uguale a,
Visibility, che è la variabile che ho definito nel codice lì.
Ora, applico questo al piatto qui, e applico anche la stessa cosa
al secondo div, dove sto visualizzando i commenti.
E questo è tutto.
Quindi lasciami salvare tutte le modifiche, e poi andremo a
dare un'occhiata a come funziona questa animazione nel nostro esempio.
Andando al browser, ora sto visualizzando loro il menu.
Permettetemi di selezionare uno dei piatti e poi passare nella vista dei piatti qui.
Quindi, quando viene visualizzato il piatto, si noti che ogni volta che mi sposto da
questo piatto al piatto successivo, quindi facendo clic sul pulsante destro.
Poi quel piatto scompare, e poi quando il nuovo piatto diventa disponibile,
la vista diventa nuovamente visibile e poi viene mostrato il nuovo piatto.
Allo stesso modo, posso fare un altro e poi notare che il nuovo piatto,
non appena le informazioni diventano disponibili, diventa di nuovo visibile.
Quindi questa è la transizione che sto applicando in questo esempio qui.
Quindi, tornando indietro, puoi vedere lo stesso comportamento ripetendosi di nuovo.
Questo piccolo cambiamento dell'interfaccia utente
aggiunge un sacco di valore al modo in cui l'utente percepisce la tua applicazione.
Come ti rendi conto, questo non aggiunge molto alla funzionalità della tua applicazione
stessa, ma aggiunge a una migliore esperienza utente.
Ed è qui che applichiamo animazioni giudiziosamente all'interno della nostra
applicazione per rendere certa esperienza utente più significativa
per l'utente che sta visualizzando la tua applicazione angolare, o
visualizzando la tua applicazione mobile, che vedremo nei corsi successivi.
In questo modo viene completato questo esercizio sulle animazioni.
Continueremo le esplorazioni delle animazioni in quella seconda
parte dell'esercizio che si presenta subito dopo.
Questo è un buon momento per fare un commento Git con le animazioni dei messaggi,
parte prima.
[ MUSIC]