Ben tornato.
Quindi, quando ho inizialmente introdotto Jay queery, ho detto che ci aiuta a fare cose come
selezionare elementi manipolarli agli ascoltatori di eventi.
E ho anche detto che aiuta con effetti e animazioni.
Quindi in questo video farò una rapida anteprima di alcuni di questi
effetti incorporati, in particolare, mostrerò due ampie categorie di effetti e diapositive di dissolvenza.
Quindi sono sulla banchina di Jay Corey qui nella categoria effetti.
gli effetti e inizierò a mostrare gli effetti di dissolvenza, quindi guarderò la dissolvenza per iniziare.
Puoi vedere che ci sono alcuni metodi che hanno a che fare con
Ciò che fa il fadeout è selezionare un elemento con un segno di dollaro o
un insieme di elementi e lo si chiami in dissolvenza e animerà quell'elemento dalla piena opacità alla trasparenza completa
o all'opacità zero.
Quindi in pratica elimina un elemento e puoi fornire una durata se vuoi che sia lento, veloce
o molto lento.
È possibile fornire un numero di millisecondi.
400 millisecondi e quindi è possibile fornire un callback da eseguire alla fine che mostrerò tra un momento.
L'impostazione predefinita è
Quindi ho intenzione di creare un nuovo file qui per dimostrare questa demo dello studio degli effetti e copierò semplicemente
la nostra struttura dall'ultima pagina demo e questo chiamerà gli effetti di J Querrey.
Quindi abbiamo questo set up e ho intenzione di sbarazzarmi di tutti questi contenuti qui e
poi ho intenzione di aggiungere alcune div.
Facciamo tre div e useremo questi div e li svaniremo, li animeremo e li faremo scorrere
su e giù.
di dare loro un po 'di contenuto in questo primo sarà questi non mi sbiadirà il prossimo.
E così ho intenzione
Ti supplico per favore.
E infine ne avremo uno che dice Aiuto aiuto aiuto.
Quindi questi div sono disperati per non essere sbiaditi.
Sfortunatamente oggi non è il loro giorno fortunato.
E li stiamo combattendo.
Quindi, per rendere questo più chiaro, aggiungerò un certo stile qui alle nostre vite in modo che abbiano un
colore che possiamo vedere svanire.
E hanno anche una larghezza e un'altezza che possiamo vedere scorrere su e giù.
Quindi selezionerò tutte le div e daremo loro una con 100 pixel e un'altezza di 100
pixel e uno sfondo a colori di verde acqua e salveremo e lo apriremo.
Abbiamo tre div.
Comunque mi piacerebbe che fossero sulla stessa linea.
Quindi un modo per farlo è con il float a sinistra.
Ora sono tutti sulla stessa linea ma sanguinano l'uno nell'altro.
Quindi per risolvere il problema possiamo aggiungere un margine.
Quindi faremo solo un margine di 20 pixel su tutti i lati.
Ora finiamo con tre quadrati e ognuno di essi ha del testo all'interno e non abbiamo davvero bisogno
di esagerare con lo styling perché tutto ciò che faremo è dimostrare come possiamo adattarli dentro e fuori.
Quindi aggiungeremo un pulsante in alto qui e questo pulsante dirà solo clic su di me.
E quando clicchiamo su questo pulsante, ciò che accadrà è che le nostre animazioni verranno eseguite.
Quindi faccio clic su questo e questi tre elementi dovrebbero scomparire per iniziare.
Quindi, per ripetere la dissolvenza, sarà necessario un elemento dalla piena opacità o da qualsiasi opacità È
attualmente presente e sbiadito fino alla completa trasparenza.
Quindi sembra che questo punto sia selezionato e possiamo fornire una stringa opzionale della velocità così lenta
o veloce o possiamo dargli un numero di millisecondi.
Quindi lascia che te lo mostri ora.
In realtà sto andando a fare questo in un file separato, quindi ho intenzione di fare un file javascript e salvare.
Lo chiamerò influenza solo geniale salva al sicuro che ha
collegato il mio avviso e collegato correttamente questo in basso.
Basta aggiungere un tag script.
La fonte è uguale agli effetti.
Sì.
E se aggiorniamo, riceviamo il nostro avviso connesso.
Quindi quello che vogliamo fare qui è Faid questi tuffi fuori.
Quindi dobbiamo selezionare il dispositivo in questo modo e non svanire.
E poi possiamo fornire una velocità o semplicemente lasciarla così.
E se questo è tutto ciò che vogliamo fare o aggiornare e puoi vedere come la pagina si carica iniziano a sfumare.
Facciamo in modo che ciò accada quando clicchiamo sul pulsante.
per il simbolo del dollaro e potremo fare clic o farò il punto su veloce e poi passeremo nella nostra funzione di callback.
Quindi vorremmo fare un punto
Quindi, quando clicchiamo, svaniremo tutte le div così e ora si aggiorneranno e se clicco posso vedere
che si dissolvono tutte.
Quindi, come ho detto, possiamo fornire un numero qui qualcosa come 1000 che è un secondo completo.
E se aggiorno vedrai quando faccio clic ci vuole un secondo prima che si dissolvano.
Un punto importante del fadeout è che se ispeziono la pagina qui e guardo gli elementi, i div sono
ancora nella squadra o ancora nel dormitorio.
Semplicemente non li vediamo perché il loro display è stato impostato su none.
Quindi non li elimina o non li rimuove dalla pagina.
Li sta solo nascondendo.
E questa è sicuramente un'importante distinzione.
Quindi diciamo che volevo solo stampare un messaggio una volta che i div erano spariti, quindi
li avrei sbiaditi e poi fare qualcosa di simile a questa dissolvenza completata mentre cancellava il registro.
E se eseguo questo, aprirò la console e osserverò l'ordine in cui accadono le cose.
Quindi, quando clicco qui, ho completato Faid modo prima che la dissolvenza sia effettivamente eseguita.
Quindi, quello che succede qui è che selezioniamo tutti i div e iniziamo la dissolvenza ma ci vuole un intero secondo.
E javascript non aspetta che il secondo finisca prima di passare alla riga successiva.
Si è immediatamente spostato su questa linea e stampa Faid completato e quindi le finiture in dissolvenza.
Quindi, se vogliamo che il codice avvenga subito dopo la dissolvenza, desideriamo che sia garantito
dopo che potremo passare qui una richiamata.
E così questa richiamata sarà chiamata all'interno della dissolvenza automaticamente quando è fatta.
Quindi ho intenzione di spostare il nostro registro costante proprio lì e salvare.
E se mi aggiorno, ora faccio clic sulle dissolvenze finali e quindi riceviamo 3 registri punti della console completati in
Fade per ognuno di essi.
Uno scenario più comune piuttosto che la semplice stampa di una stringa nel Console è di rimuovere effettivamente gli
elementi una volta che li svaniscono.
Quindi ho detto che sono nascosti e non sono davvero spariti.
E se volessimo cancellarli come nella nostra lista di cose da costruire, quando clicchiamo sul
cestino accanto a un elemento che vogliamo che si dissolva lentamente, facciamo una bella animazione.
Ma poi anche solo eliminare completamente la pagina dal DOM.
Quindi dobbiamo usare un metodo chiamato remove e vogliamo solo rimuoverlo dopo che la dissolvenza è finita.
In questo modo questo rimuoverà solo questo.
E ciò che farà sarà attendere fino al termine della dissolvenza.
E per ogni div eseguirà il metodo Remove su di esso.
Quindi aggiornare e fare clic su di me.
Si dissolvono e poi se passiamo agli elementi puoi vedere che il nostro corpo ha solo un pulsante
ora e un tag tutti i div sono completamente spariti.
E se commento questa riga e aggiorni, puoi vedere dove iniziano qui tre div e faccio clic
sul pulsante e tutto ciò che accade.
Sbiadiscono e quindi la visualizzazione è impostata su none.
Quindi, se inserisco il mio codice nel posto sbagliato e ho eseguito il metodo Remove qui sotto, ho fatto tutte le divizioni
punto remove proprio così.
Quello che accadrebbe in realtà è che l'ordine non è garantito.
E questo richiederà un secondo intero.
E questo codice non aspetterà che il secondo finisca.
Quindi inizierà a dissolversi e quindi rimuoverà immediatamente dopo.
Così finisce per sembrare così quando inizia a svanire e subito dopo lo rimuove.
Quindi non è praticamente nessuna svanire.
Ecco perché J.
Corey fornisce questa richiamata perché è piuttosto comune per noi voler fare qualcosa dopo
che abbiamo sbiadito qualcosa o dopo aver fatto scorrere qualcosa o qualunque sia l'animazione.
Quindi questo mi porta al mio prossimo punto che è quello di voler mostrare alcune delle
altre animazioni che possiamo fare in modo che possiamo anche svanire le cose.
Quindi, se imposto il display come nessuno all'inizio come questo, aggiorno.
Non vediamo i div perché ora sono nascosti piuttosto che svanire quando clicchiamo possiamo farli
svanire e funziona proprio come ci si aspetterebbe.
Fai clic sul pulsante e passano in dissolvenza in un secondo e poi se vogliamo eseguire un codice in seguito, quando
sappiamo che sono finiti, possiamo mettere un po 'di codice e dire se la richiamata qui.
Va bene, ecco Faden.
GK fornisce un altro metodo di dissolvenza che si chiama Faid toggle e Faid toggle funziona allo stesso modo.
Fornisco un numero di millisecondi e saprò se è necessario sbiadire qualcosa dentro o fuori a seconda se
sta attualmente mostrando o meno.
Quindi, se aggiorno e faccio clic su Attiva dissolvenza, viene avviato inserendoli tutti e quindi dissolvendoli
tutti e tornando indietro.
È fondamentalmente come aggiungere una classe all'elenco delle classi o utilizzare la classe di attivazione con Jay Querrey, in cui si
decide solo se è necessario eseguire la dissolvenza o la dissolvenza in apertura.
Va bene così che sta sbiadendo il prossimo set di effetti che voglio dimostrare sono questi effetti scorrevoli.
Quindi quaggiù abbiamo una slide slide down slide e slide up.
Quindi inizierò con la diapositiva verso il basso e quello che fa è che ci vuole un elemento che al momento
non viene mostrato piuttosto che animare l'opacità su un elemento come Faid in realtà anima l'altezza di un elemento.
Quindi ti mostrerò come funziona.
Lo cambieremo.
Piuttosto che dissolvenza, faremo scorrere verso il basso.
E questo perché quando aggiorniamo i nostri elementi sono nascosti.
Quindi, se faccio scorrere verso il basso quando clicchiamo su un pulsante, vedremo che l'altezza è animata verso il basso e
la stessa cosa vale per la diapositiva.
Fa il contrario.
Quindi, se mi togli il display in modo che vengano visualizzati.
E ora clicco sul pulsante.
La loro altezza è animata e scivolano verso l'alto e quindi vengono visualizzati su Nessuno alla fine.
E l'altro metodo è l'interruttore a scorrimento che funziona proprio come Faid toggle dove decide cosa fare.
Quindi, se clicco, scorrono verso l'alto e ora scivolano verso il basso e indietro su e giù.
Quindi è tutto quello che è necessario far scorrere verso il basso la diapositiva e far scorrere l'interruttore.
Erano proprio come se fossero metodi analogici di Faid.
C'è anche un callback opzionale che possiamo inoltrare.
Quindi se diamo una durata come 1 secondo e poi posso richiamare la mia chiamata.
E farò solo un altro con. quel registro alla fine della diapositiva è fatto.
E questo verrà stampato solo una volta completata la seconda diapositiva completa.
Quindi mi rinfresco.
Diamo un'occhiata alla console e cliccano su cliccami e puoi vederlo stampato solo dopo aver fatto la
diapositiva.
La stessa cosa qui presta attenzione qui.
Questo cambierà a sei.
Eccoci.
Ma di nuovo uno schema più comune è quello di rimuovere gli oggetti una volta che li abbiamo estratti
o sbiaditi o qualsiasi cosa abbiamo fatto è rimuoverli.
Quindi qui ci vorrà un secondo per farli scorrere e poi vengono rimossi dalla pagina.
E se andiamo alla scheda degli elementi il ​​nostro corpo è vuoto tranne che per quel pulsante e la sceneggiatura.
Quindi spero che ti diano una buona idea di come funzionano alcuni degli effetti in una cava.
Questi sono di gran lunga il più comune sbiadisc e scorrevole.
E li useremo al posto della nostra app per le liste da fare che inizieremo nel prossimo video.