1
00:00:00,330 --> 00:00:01,500
Ben tornato.

2
00:00:01,500 --> 00:00:06,510
Quindi, quando ho inizialmente introdotto Jay queery, ho detto che ci aiuta a fare cose come

3
00:00:06,630 --> 00:00:08,820
selezionare elementi manipolarli agli ascoltatori di eventi.

4
00:00:08,930 --> 00:00:11,990
E ho anche detto che aiuta con effetti e animazioni.

5
00:00:12,180 --> 00:00:16,800
Quindi in questo video farò una rapida anteprima di alcuni di questi

6
00:00:16,800 --> 00:00:22,000
effetti incorporati, in particolare, mostrerò due ampie categorie di effetti e diapositive di dissolvenza.

7
00:00:22,250 --> 00:00:26,220
Quindi sono sulla banchina di Jay Corey qui nella categoria effetti.

8
00:00:26,280 --> 00:00:31,650
gli effetti e inizierò a mostrare gli effetti di dissolvenza, quindi guarderò la dissolvenza per iniziare.

9
00:00:31,650 --> 00:00:36,010
Puoi vedere che ci sono alcuni metodi che hanno a che fare con

10
00:00:36,570 --> 00:00:41,900
Ciò che fa il fadeout è selezionare un elemento con un segno di dollaro o

11
00:00:41,910 --> 00:00:48,480
un insieme di elementi e lo si chiami in dissolvenza e animerà quell'elemento dalla piena opacità alla trasparenza completa

12
00:00:48,480 --> 00:00:49,470
o all'opacità zero.

13
00:00:49,500 --> 00:00:56,130
Quindi in pratica elimina un elemento e puoi fornire una durata se vuoi che sia lento, veloce

14
00:00:56,220 --> 00:00:57,380
o molto lento.

15
00:00:57,510 --> 00:00:59,690
È possibile fornire un numero di millisecondi.

16
00:00:59,700 --> 00:01:05,520
400 millisecondi e quindi è possibile fornire un callback da eseguire alla fine che mostrerò tra un momento.

17
00:01:05,520 --> 00:01:06,630
L'impostazione predefinita è

18
00:01:06,780 --> 00:01:13,740
Quindi ho intenzione di creare un nuovo file qui per dimostrare questa demo dello studio degli effetti e copierò semplicemente

19
00:01:13,740 --> 00:01:18,660
la nostra struttura dall'ultima pagina demo e questo chiamerà gli effetti di J Querrey.

20
00:01:18,960 --> 00:01:24,480
Quindi abbiamo questo set up e ho intenzione di sbarazzarmi di tutti questi contenuti qui e

21
00:01:24,480 --> 00:01:27,000
poi ho intenzione di aggiungere alcune div.

22
00:01:27,120 --> 00:01:33,240
Facciamo tre div e useremo questi div e li svaniremo, li animeremo e li faremo scorrere

23
00:01:33,240 --> 00:01:34,340
su e giù.

24
00:01:34,450 --> 00:01:43,620
di dare loro un po 'di contenuto in questo primo sarà questi non mi sbiadirà il prossimo.

25
00:01:43,620 --> 00:01:45,470
E così ho intenzione

26
00:01:45,900 --> 00:01:48,300
Ti supplico per favore.

27
00:01:48,660 --> 00:01:52,380
E infine ne avremo uno che dice Aiuto aiuto aiuto.

28
00:01:52,720 --> 00:01:55,790
Quindi questi div sono disperati per non essere sbiaditi.

29
00:01:56,040 --> 00:01:58,210
Sfortunatamente oggi non è il loro giorno fortunato.

30
00:01:58,410 --> 00:02:00,230
E li stiamo combattendo.

31
00:02:00,240 --> 00:02:05,280
Quindi, per rendere questo più chiaro, aggiungerò un certo stile qui alle nostre vite in modo che abbiano un

32
00:02:05,280 --> 00:02:06,720
colore che possiamo vedere svanire.

33
00:02:07,110 --> 00:02:10,900
E hanno anche una larghezza e un'altezza che possiamo vedere scorrere su e giù.

34
00:02:10,950 --> 00:02:20,200
Quindi selezionerò tutte le div e daremo loro una con 100 pixel e un'altezza di 100

35
00:02:20,220 --> 00:02:28,150
pixel e uno sfondo a colori di verde acqua e salveremo e lo apriremo.

36
00:02:28,860 --> 00:02:30,420
Abbiamo tre div.

37
00:02:30,420 --> 00:02:32,570
Comunque mi piacerebbe che fossero sulla stessa linea.

38
00:02:32,880 --> 00:02:36,900
Quindi un modo per farlo è con il float a sinistra.

39
00:02:37,020 --> 00:02:39,880
Ora sono tutti sulla stessa linea ma sanguinano l'uno nell'altro.

40
00:02:40,200 --> 00:02:43,020
Quindi per risolvere il problema possiamo aggiungere un margine.

41
00:02:43,020 --> 00:02:46,850
Quindi faremo solo un margine di 20 pixel su tutti i lati.

42
00:02:46,860 --> 00:02:51,930
Ora finiamo con tre quadrati e ognuno di essi ha del testo all'interno e non abbiamo davvero bisogno

43
00:02:51,930 --> 00:02:56,740
di esagerare con lo styling perché tutto ciò che faremo è dimostrare come possiamo adattarli dentro e fuori.

44
00:02:57,060 --> 00:03:03,060
Quindi aggiungeremo un pulsante in alto qui e questo pulsante dirà solo clic su di me.

45
00:03:03,270 --> 00:03:08,000
E quando clicchiamo su questo pulsante, ciò che accadrà è che le nostre animazioni verranno eseguite.

46
00:03:08,220 --> 00:03:12,760
Quindi faccio clic su questo e questi tre elementi dovrebbero scomparire per iniziare.

47
00:03:13,320 --> 00:03:19,350
Quindi, per ripetere la dissolvenza, sarà necessario un elemento dalla piena opacità o da qualsiasi opacità È

48
00:03:19,650 --> 00:03:22,500
attualmente presente e sbiadito fino alla completa trasparenza.

49
00:03:22,500 --> 00:03:29,730
Quindi sembra che questo punto sia selezionato e possiamo fornire una stringa opzionale della velocità così lenta

50
00:03:29,730 --> 00:03:33,370
o veloce o possiamo dargli un numero di millisecondi.

51
00:03:33,390 --> 00:03:34,490
Quindi lascia che te lo mostri ora.

52
00:03:34,740 --> 00:03:39,870
In realtà sto andando a fare questo in un file separato, quindi ho intenzione di fare un file javascript e salvare.

53
00:03:40,250 --> 00:03:45,000
Lo chiamerò influenza solo geniale salva al sicuro che ha

54
00:03:47,940 --> 00:03:52,470
collegato il mio avviso e collegato correttamente questo in basso.

55
00:03:52,470 --> 00:03:54,020
Basta aggiungere un tag script.

56
00:03:54,480 --> 00:03:56,450
La fonte è uguale agli effetti.

57
00:03:56,560 --> 00:03:57,320
Sì.

58
00:03:57,690 --> 00:04:01,030
E se aggiorniamo, riceviamo il nostro avviso connesso.

59
00:04:01,350 --> 00:04:04,380
Quindi quello che vogliamo fare qui è Faid questi tuffi fuori.

60
00:04:04,380 --> 00:04:10,040
Quindi dobbiamo selezionare il dispositivo in questo modo e non svanire.

61
00:04:10,380 --> 00:04:13,290
E poi possiamo fornire una velocità o semplicemente lasciarla così.

62
00:04:13,290 --> 00:04:20,630
E se questo è tutto ciò che vogliamo fare o aggiornare e puoi vedere come la pagina si carica iniziano a sfumare.

63
00:04:20,640 --> 00:04:23,740
Facciamo in modo che ciò accada quando clicchiamo sul pulsante.

64
00:04:24,090 --> 00:04:34,800
per il simbolo del dollaro e potremo fare clic o farò il punto su veloce e poi passeremo nella nostra funzione di callback.

65
00:04:36,300 --> 00:04:38,480
Quindi vorremmo fare un punto

66
00:04:38,640 --> 00:04:47,770
Quindi, quando clicchiamo, svaniremo tutte le div così e ora si aggiorneranno e se clicco posso vedere

67
00:04:48,490 --> 00:04:50,870
che si dissolvono tutte.

68
00:04:50,980 --> 00:04:56,060
Quindi, come ho detto, possiamo fornire un numero qui qualcosa come 1000 che è un secondo completo.

69
00:04:56,260 --> 00:05:02,370
E se aggiorno vedrai quando faccio clic ci vuole un secondo prima che si dissolvano.

70
00:05:02,620 --> 00:05:09,580
Un punto importante del fadeout è che se ispeziono la pagina qui e guardo gli elementi, i div sono

71
00:05:09,580 --> 00:05:12,400
ancora nella squadra o ancora nel dormitorio.

72
00:05:12,430 --> 00:05:15,760
Semplicemente non li vediamo perché il loro display è stato impostato su none.

73
00:05:15,760 --> 00:05:18,730
Quindi non li elimina o non li rimuove dalla pagina.

74
00:05:18,910 --> 00:05:20,010
Li sta solo nascondendo.

75
00:05:20,170 --> 00:05:22,890
E questa è sicuramente un'importante distinzione.

76
00:05:22,990 --> 00:05:28,960
Quindi diciamo che volevo solo stampare un messaggio una volta che i div erano spariti, quindi

77
00:05:28,960 --> 00:05:35,150
li avrei sbiaditi e poi fare qualcosa di simile a questa dissolvenza completata mentre cancellava il registro.

78
00:05:35,680 --> 00:05:39,590
E se eseguo questo, aprirò la console e osserverò l'ordine in cui accadono le cose.

79
00:05:39,730 --> 00:05:45,800
Quindi, quando clicco qui, ho completato Faid modo prima che la dissolvenza sia effettivamente eseguita.

80
00:05:46,090 --> 00:05:51,490
Quindi, quello che succede qui è che selezioniamo tutti i div e iniziamo la dissolvenza ma ci vuole un intero secondo.

81
00:05:52,060 --> 00:05:56,280
E javascript non aspetta che il secondo finisca prima di passare alla riga successiva.

82
00:05:56,350 --> 00:06:02,310
Si è immediatamente spostato su questa linea e stampa Faid completato e quindi le finiture in dissolvenza.

83
00:06:02,470 --> 00:06:08,230
Quindi, se vogliamo che il codice avvenga subito dopo la dissolvenza, desideriamo che sia garantito

84
00:06:08,680 --> 00:06:11,390
dopo che potremo passare qui una richiamata.

85
00:06:11,440 --> 00:06:16,860
E così questa richiamata sarà chiamata all'interno della dissolvenza automaticamente quando è fatta.

86
00:06:17,020 --> 00:06:20,830
Quindi ho intenzione di spostare il nostro registro costante proprio lì e salvare.

87
00:06:21,300 --> 00:06:29,530
E se mi aggiorno, ora faccio clic sulle dissolvenze finali e quindi riceviamo 3 registri punti della console completati in

88
00:06:29,540 --> 00:06:31,650
Fade per ognuno di essi.

89
00:06:31,690 --> 00:06:37,390
Uno scenario più comune piuttosto che la semplice stampa di una stringa nel Console è di rimuovere effettivamente gli

90
00:06:37,390 --> 00:06:39,220
elementi una volta che li svaniscono.

91
00:06:39,220 --> 00:06:42,580
Quindi ho detto che sono nascosti e non sono davvero spariti.

92
00:06:42,660 --> 00:06:47,350
E se volessimo cancellarli come nella nostra lista di cose da costruire, quando clicchiamo sul

93
00:06:47,350 --> 00:06:51,940
cestino accanto a un elemento che vogliamo che si dissolva lentamente, facciamo una bella animazione.

94
00:06:52,060 --> 00:06:55,620
Ma poi anche solo eliminare completamente la pagina dal DOM.

95
00:06:55,810 --> 00:07:02,320
Quindi dobbiamo usare un metodo chiamato remove e vogliamo solo rimuoverlo dopo che la dissolvenza è finita.

96
00:07:03,340 --> 00:07:09,460
In questo modo questo rimuoverà solo questo.

97
00:07:10,010 --> 00:07:13,930
E ciò che farà sarà attendere fino al termine della dissolvenza.

98
00:07:13,990 --> 00:07:17,050
E per ogni div eseguirà il metodo Remove su di esso.

99
00:07:17,050 --> 00:07:20,430
Quindi aggiornare e fare clic su di me.

100
00:07:21,100 --> 00:07:26,650
Si dissolvono e poi se passiamo agli elementi puoi vedere che il nostro corpo ha solo un pulsante

101
00:07:26,650 --> 00:07:29,850
ora e un tag tutti i div sono completamente spariti.

102
00:07:30,100 --> 00:07:36,520
E se commento questa riga e aggiorni, puoi vedere dove iniziano qui tre div e faccio clic

103
00:07:36,520 --> 00:07:39,130
sul pulsante e tutto ciò che accade.

104
00:07:39,160 --> 00:07:42,910
Sbiadiscono e quindi la visualizzazione è impostata su none.

105
00:07:42,910 --> 00:07:51,340
Quindi, se inserisco il mio codice nel posto sbagliato e ho eseguito il metodo Remove qui sotto, ho fatto tutte le divizioni

106
00:07:51,430 --> 00:07:52,850
punto remove proprio così.

107
00:07:52,900 --> 00:07:57,080
Quello che accadrebbe in realtà è che l'ordine non è garantito.

108
00:07:57,280 --> 00:07:59,210
E questo richiederà un secondo intero.

109
00:07:59,410 --> 00:08:01,800
E questo codice non aspetterà che il secondo finisca.

110
00:08:01,930 --> 00:08:06,410
Quindi inizierà a dissolversi e quindi rimuoverà immediatamente dopo.

111
00:08:06,610 --> 00:08:13,150
Così finisce per sembrare così quando inizia a svanire e subito dopo lo rimuove.

112
00:08:13,780 --> 00:08:16,450
Quindi non è praticamente nessuna svanire.

113
00:08:16,480 --> 00:08:17,110
Ecco perché J.

114
00:08:17,110 --> 00:08:21,940
Corey fornisce questa richiamata perché è piuttosto comune per noi voler fare qualcosa dopo

115
00:08:21,940 --> 00:08:26,810
che abbiamo sbiadito qualcosa o dopo aver fatto scorrere qualcosa o qualunque sia l'animazione.

116
00:08:26,830 --> 00:08:30,760
Quindi questo mi porta al mio prossimo punto che è quello di voler mostrare alcune delle

117
00:08:30,760 --> 00:08:33,790
altre animazioni che possiamo fare in modo che possiamo anche svanire le cose.

118
00:08:34,030 --> 00:08:40,920
Quindi, se imposto il display come nessuno all'inizio come questo, aggiorno.

119
00:08:41,020 --> 00:08:46,780
Non vediamo i div perché ora sono nascosti piuttosto che svanire quando clicchiamo possiamo farli

120
00:08:46,780 --> 00:08:49,840
svanire e funziona proprio come ci si aspetterebbe.

121
00:08:49,840 --> 00:08:55,720
Fai clic sul pulsante e passano in dissolvenza in un secondo e poi se vogliamo eseguire un codice in seguito, quando

122
00:08:55,720 --> 00:09:00,350
sappiamo che sono finiti, possiamo mettere un po 'di codice e dire se la richiamata qui.

123
00:09:00,970 --> 00:09:02,310
Va bene, ecco Faden.

124
00:09:02,350 --> 00:09:09,610
GK fornisce un altro metodo di dissolvenza che si chiama Faid toggle e Faid toggle funziona allo stesso modo.

125
00:09:10,660 --> 00:09:16,330
Fornisco un numero di millisecondi e saprò se è necessario sbiadire qualcosa dentro o fuori a seconda se

126
00:09:16,330 --> 00:09:18,080
sta attualmente mostrando o meno.

127
00:09:18,310 --> 00:09:25,360
Quindi, se aggiorno e faccio clic su Attiva dissolvenza, viene avviato inserendoli tutti e quindi dissolvendoli

128
00:09:25,360 --> 00:09:27,020
tutti e tornando indietro.

129
00:09:27,040 --> 00:09:32,500
È fondamentalmente come aggiungere una classe all'elenco delle classi o utilizzare la classe di attivazione con Jay Querrey, in cui si

130
00:09:32,500 --> 00:09:35,860
decide solo se è necessario eseguire la dissolvenza o la dissolvenza in apertura.

131
00:09:35,860 --> 00:09:43,960
Va bene così che sta sbiadendo il prossimo set di effetti che voglio dimostrare sono questi effetti scorrevoli.

132
00:09:44,320 --> 00:09:49,170
Quindi quaggiù abbiamo una slide slide down slide e slide up.

133
00:09:49,240 --> 00:09:55,270
Quindi inizierò con la diapositiva verso il basso e quello che fa è che ci vuole un elemento che al momento

134
00:09:55,270 --> 00:10:00,640
non viene mostrato piuttosto che animare l'opacità su un elemento come Faid in realtà anima l'altezza di un elemento.

135
00:10:01,090 --> 00:10:03,030
Quindi ti mostrerò come funziona.

136
00:10:03,130 --> 00:10:04,300
Lo cambieremo.

137
00:10:04,300 --> 00:10:07,870
Piuttosto che dissolvenza, faremo scorrere verso il basso.

138
00:10:08,650 --> 00:10:11,810
E questo perché quando aggiorniamo i nostri elementi sono nascosti.

139
00:10:11,920 --> 00:10:19,000
Quindi, se faccio scorrere verso il basso quando clicchiamo su un pulsante, vedremo che l'altezza è animata verso il basso e

140
00:10:19,000 --> 00:10:21,270
la stessa cosa vale per la diapositiva.

141
00:10:21,400 --> 00:10:22,420
Fa il contrario.

142
00:10:22,480 --> 00:10:26,360
Quindi, se mi togli il display in modo che vengano visualizzati.

143
00:10:26,710 --> 00:10:28,630
E ora clicco sul pulsante.

144
00:10:28,630 --> 00:10:33,590
La loro altezza è animata e scivolano verso l'alto e quindi vengono visualizzati su Nessuno alla fine.

145
00:10:33,910 --> 00:10:41,540
E l'altro metodo è l'interruttore a scorrimento che funziona proprio come Faid toggle dove decide cosa fare.

146
00:10:41,650 --> 00:10:48,090
Quindi, se clicco, scorrono verso l'alto e ora scivolano verso il basso e indietro su e giù.

147
00:10:48,370 --> 00:10:51,740
Quindi è tutto quello che è necessario far scorrere verso il basso la diapositiva e far scorrere l'interruttore.

148
00:10:51,760 --> 00:10:54,320
Erano proprio come se fossero metodi analogici di Faid.

149
00:10:54,610 --> 00:10:57,580
C'è anche un callback opzionale che possiamo inoltrare.

150
00:10:57,790 --> 00:11:04,250
Quindi se diamo una durata come 1 secondo e poi posso richiamare la mia chiamata.

151
00:11:04,600 --> 00:11:09,380
E farò solo un altro con. quel registro alla fine della diapositiva è fatto.

152
00:11:09,730 --> 00:11:15,250
E questo verrà stampato solo una volta completata la seconda diapositiva completa.

153
00:11:15,250 --> 00:11:16,130
Quindi mi rinfresco.

154
00:11:16,270 --> 00:11:24,970
Diamo un'occhiata alla console e cliccano su cliccami e puoi vederlo stampato solo dopo aver fatto la

155
00:11:24,970 --> 00:11:25,630
diapositiva.

156
00:11:25,630 --> 00:11:28,380
La stessa cosa qui presta attenzione qui.

157
00:11:28,390 --> 00:11:31,330
Questo cambierà a sei.

158
00:11:31,330 --> 00:11:32,630
Eccoci.

159
00:11:33,290 --> 00:11:40,510
Ma di nuovo uno schema più comune è quello di rimuovere gli oggetti una volta che li abbiamo estratti

160
00:11:40,510 --> 00:11:43,670
o sbiaditi o qualsiasi cosa abbiamo fatto è rimuoverli.

161
00:11:43,690 --> 00:11:48,400
Quindi qui ci vorrà un secondo per farli scorrere e poi vengono rimossi dalla pagina.

162
00:11:48,460 --> 00:11:53,970
E se andiamo alla scheda degli elementi il ​​nostro corpo è vuoto tranne che per quel pulsante e la sceneggiatura.

163
00:11:54,580 --> 00:11:58,810
Quindi spero che ti diano una buona idea di come funzionano alcuni degli effetti in una cava.

164
00:11:58,810 --> 00:12:02,110
Questi sono di gran lunga il più comune sbiadisc e scorrevole.

165
00:12:02,110 --> 00:12:06,190
E li useremo al posto della nostra app per le liste da fare che inizieremo nel prossimo video.