1
00:00:00,330 --> 00:00:01,500
Dar una buena acogida.

2
00:00:01,500 --> 00:00:06,510
Entonces, cuando inicialmente presenté Jay queery, mencioné que nos ayuda a hacer cosas como seleccionar elementos

3
00:00:06,630 --> 00:00:08,820
para manipularlos en los oyentes del evento.

4
00:00:08,930 --> 00:00:11,990
Y también mencioné que ayuda con los efectos y las animaciones.

5
00:00:12,180 --> 00:00:16,800
Así que en este video voy a hacer una vista previa rápida de algunos de los

6
00:00:16,800 --> 00:00:22,000
efectos incorporados, en particular, voy a mostrar dos amplias categorías de efectos de desvanecimiento de efectos y diapositivas.

7
00:00:22,250 --> 00:00:26,220
Así que estoy en los muelles de Jay Corey aquí en la categoría de efectos.

8
00:00:26,280 --> 00:00:31,650
comenzaré mostrando los efectos de desvanecimiento, así que voy a ver el fundido de salida para comenzar.

9
00:00:31,650 --> 00:00:36,010
Puede ver que hay bastantes métodos que tienen que ver con los efectos y

10
00:00:36,570 --> 00:00:41,900
Lo que hace fadeout es seleccionar un elemento con un signo de dólar o un

11
00:00:41,910 --> 00:00:48,480
conjunto de elementos y lo llama fundido y animará ese elemento desde una opacidad total hasta una transparencia total

12
00:00:48,480 --> 00:00:49,470
u opacidad cero.

13
00:00:49,500 --> 00:00:56,130
Por lo tanto, básicamente se desvanece un elemento y puede proporcionar una duración si desea que sea lento o rápido

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

15
00:00:57,510 --> 00:00:59,690
Puede proporcionar una cantidad de milisegundos.

16
00:00:59,700 --> 00:01:05,520
400 milisegundos y luego puede proporcionar una devolución de llamada para ejecutar al final que mostraré en un momento.

17
00:01:05,520 --> 00:01:06,630
El valor predeterminado es

18
00:01:06,780 --> 00:01:13,740
Así que voy a hacer un nuevo archivo aquí para demostrar esta demostración del estudio de efectos y copiaré nuestra estructura

19
00:01:13,740 --> 00:01:18,660
desde la última página de demostración y esta llamará a los efectos de J Querrey.

20
00:01:18,960 --> 00:01:24,480
Así que tenemos esa configuración y voy a deshacerme de todo este contenido aquí y

21
00:01:24,480 --> 00:01:27,000
luego voy a agregar unos pocos divs.

22
00:01:27,120 --> 00:01:33,240
Hagamos tres divs y vamos a usar estos divs y desvanecerlos, animarlos y deslizarlos

23
00:01:33,240 --> 00:01:34,340
arriba y abajo.

24
00:01:34,450 --> 00:01:43,620
a darles un poco de contenido dentro de este primero serán estos no me desvanezcan el próximo.

25
00:01:43,620 --> 00:01:45,470
Y entonces voy

26
00:01:45,900 --> 00:01:48,300
Te lo ruego, por favor.

27
00:01:48,660 --> 00:01:52,380
Y finalmente, tendremos uno que diga Ayuda para ayudar.

28
00:01:52,720 --> 00:01:55,790
Entonces estos divs están desesperados por no desvanecerse.

29
00:01:56,040 --> 00:01:58,210
Lamentablemente, hoy no es su día de suerte.

30
00:01:58,410 --> 00:02:00,230
Y vamos a luchar contra ellos.

31
00:02:00,240 --> 00:02:05,280
Para aclarar esto, voy a agregar algo de estilo aquí a nuestras vidas para que tengan un

32
00:02:05,280 --> 00:02:06,720
color que podamos ver desvanecerse.

33
00:02:07,110 --> 00:02:10,900
Y también tienen un ancho y una altura que podemos ver deslizar hacia arriba y hacia abajo.

34
00:02:10,950 --> 00:02:20,200
Así que voy a seleccionar todos los divs y les daré un con 100 píxeles y una altura

35
00:02:20,220 --> 00:02:28,150
de 100 píxeles y un fondo de color de verde azulado y ahorremos y lo abriremos.

36
00:02:28,860 --> 00:02:30,420
Tenemos tres divs.

37
00:02:30,420 --> 00:02:32,570
Sin embargo, me gustaría que estén en la misma línea.

38
00:02:32,880 --> 00:02:36,900
Entonces, una forma de hacerlo es con el flotador a la izquierda.

39
00:02:37,020 --> 00:02:39,880
Ahora todos están en la misma línea, pero se desangran el uno al otro.

40
00:02:40,200 --> 00:02:43,020
Entonces, para solucionarlo, podemos agregar un margen.

41
00:02:43,020 --> 00:02:46,850
Así que haremos un margen de 20 píxeles en todos los lados.

42
00:02:46,860 --> 00:02:51,930
Ahora terminamos con tres cuadrados y cada uno tiene algo de texto dentro y realmente no es necesario ir

43
00:02:51,930 --> 00:02:56,740
por el estilo porque todo lo que vamos a hacer es demostrar cómo podemos encajarlos dentro y fuera.

44
00:02:57,060 --> 00:03:03,060
Así que vamos a agregar un botón arriba aquí y este botón simplemente dirá clic en mí.

45
00:03:03,270 --> 00:03:08,000
Y cuando hacemos clic en este botón, lo que sucederá es que nuestras animaciones se ejecutarán.

46
00:03:08,220 --> 00:03:12,760
Así que hago clic en esto y estos tres elementos deberían desaparecer para comenzar.

47
00:03:13,320 --> 00:03:19,350
Por lo tanto, para reiterar el desvanecimiento se tomará un elemento de opacidad completa o cualquier opacidad en la que se encuentre

48
00:03:19,650 --> 00:03:22,500
actualmente y se desvaneció hasta el punto de transparencia total.

49
00:03:22,500 --> 00:03:29,730
Por lo tanto, se parece a este select fadeout de punto y podemos proporcionar una cadena opcional de velocidad tan

50
00:03:29,730 --> 00:03:33,370
lenta o rápida o podemos darle un número de milisegundos.

51
00:03:33,390 --> 00:03:34,490
Así que déjame mostrarte eso ahora.

52
00:03:34,740 --> 00:03:39,870
De hecho, voy a hacer esto en un archivo separado, así que crearé un archivo javascript y lo guardaré.

53
00:03:40,250 --> 00:03:45,000
Lo llamaré afecta solo la seguridad del genio seguro que tenía

54
00:03:47,940 --> 00:03:52,470
mi alerta conectada y vinculó esto correctamente en la parte inferior.

55
00:03:52,470 --> 00:03:54,020
Solo agrega una etiqueta de script.

56
00:03:54,480 --> 00:03:56,450
Fuente igual a efectos

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

58
00:03:57,690 --> 00:04:01,030
Y si actualizamos, obtenemos nuestra alerta conectada.

59
00:04:01,350 --> 00:04:04,380
Entonces, lo que queremos hacer aquí es Faid these divs out.

60
00:04:04,380 --> 00:04:10,040
Entonces tenemos que seleccionar el dispositivo así y no desvanecerse.

61
00:04:10,380 --> 00:04:13,290
Y luego podemos proporcionar una velocidad o simplemente dejarlo así.

62
00:04:13,290 --> 00:04:20,630
Y si eso es todo lo que queremos hacer o actualizar y puedes ver como la página carga, comienzan a desvanecerse.

63
00:04:20,640 --> 00:04:23,740
Entonces hagamos que eso suceda cuando hagamos clic en el botón.

64
00:04:24,090 --> 00:04:34,800
un botón con un signo de dólar y podemos hacer clic o lo haré con el punto rápido y luego pasar nuestra función de devolución de llamada.

65
00:04:36,300 --> 00:04:38,480
Así que vamos a querer hacer

66
00:04:38,640 --> 00:04:47,770
Entonces, cuando hagamos clic en, se desvanecerán todos los divs así y ahora se actualizarán y si hago clic se

67
00:04:48,490 --> 00:04:50,870
puede ver que se desvanecen.

68
00:04:50,980 --> 00:04:56,060
Entonces como mencioné podemos proporcionar un número aquí algo así como 1000 que es un segundo completo.

69
00:04:56,260 --> 00:05:02,370
Y si actualizo verá que cuando hago clic tarda un segundo completo para que desaparezca.

70
00:05:02,620 --> 00:05:09,580
Un punto importante acerca de fadeout es que si inspecciono la página aquí y miro los elementos, los divs todavía están

71
00:05:09,580 --> 00:05:12,400
en el equipo, ya sea en el dormitorio.

72
00:05:12,430 --> 00:05:15,760
Simplemente no los vemos porque su pantalla se ha configurado en ninguno.

73
00:05:15,760 --> 00:05:18,730
Por lo tanto, no los elimina o no los elimina de la página.

74
00:05:18,910 --> 00:05:20,010
Es solo esconderlos.

75
00:05:20,170 --> 00:05:22,890
Y esa es definitivamente una distinción importante.

76
00:05:22,990 --> 00:05:28,960
Entonces, digamos que solo quería imprimir un mensaje una vez que los divs se habían

77
00:05:28,960 --> 00:05:35,150
desvanecido para poder desvanecerlos y luego hacer algo como este fundido completado al anular el registro.

78
00:05:35,680 --> 00:05:39,590
Y si ejecuto esto, abriré la consola y observaré el orden en que suceden las cosas.

79
00:05:39,730 --> 00:05:45,800
Así que cuando hago clic aquí obtengo Faid completado mucho antes de que el fade se termine.

80
00:05:46,090 --> 00:05:51,490
Entonces, lo que sucede aquí es que seleccionamos todos los divs y comenzamos el fade out pero lleva un segundo completo.

81
00:05:52,060 --> 00:05:56,280
Y javascript no espera a que termine ese segundo antes de pasar a la siguiente línea.

82
00:05:56,350 --> 00:06:02,310
Inmediatamente se movió a esta línea e imprime Faid completado y luego termina el desvanecimiento.

83
00:06:02,470 --> 00:06:08,230
Entonces, si queremos que el código suceda justo después de que finalice el fundido, queremos que se garantice que esté

84
00:06:08,680 --> 00:06:11,390
después de que podamos pasar una devolución de llamada aquí.

85
00:06:11,440 --> 00:06:16,860
Y así se llamará a esta devolución de llamada dentro de fadeout automáticamente cuando haya terminado.

86
00:06:17,020 --> 00:06:20,830
Así que voy a mover nuestro registro constante allí mismo y guardar.

87
00:06:21,300 --> 00:06:29,530
Y si actualizo y ahora hago clic en los acabados de fundido y luego obtenemos 3 registros de puntos de la consola completados por

88
00:06:29,540 --> 00:06:31,650
Fade para cada uno de ellos.

89
00:06:31,690 --> 00:06:37,390
Un escenario más común en lugar de simplemente imprimir una cadena en el cónsul es eliminar realmente los

90
00:06:37,390 --> 00:06:39,220
elementos una vez que los desvanezcamos.

91
00:06:39,220 --> 00:06:42,580
Así que mencioné que simplemente están ocultos, que en realidad no se han ido.

92
00:06:42,660 --> 00:06:47,350
Y si quisiéramos eliminarlos como en nuestra lista de cosas por hacer, vamos a construir cuando hagamos clic en

93
00:06:47,350 --> 00:06:51,940
el bote de basura al lado de un artículo que queremos que desaparezca lentamente y hagamos una buena animación.

94
00:06:52,060 --> 00:06:55,620
Pero también elimine la página completamente del DOM.

95
00:06:55,810 --> 00:07:02,320
Entonces, necesitamos usar un método llamado remove y solo queremos eliminarlo una vez finalizado el fadeout.

96
00:07:03,340 --> 00:07:09,460
Entonces, parece que esto solo hará esto.

97
00:07:10,010 --> 00:07:13,930
Y lo que esto hará es esperar hasta que se termine el fadeout.

98
00:07:13,990 --> 00:07:17,050
Y para cada div ejecutará el método Remove en él.

99
00:07:17,050 --> 00:07:20,430
Así que actualice y haga clic en hacer clic en mí.

100
00:07:21,100 --> 00:07:26,650
Se desvanecen y luego, si pasamos a los elementos, puedes ver que nuestro cuerpo solo tiene un botón

101
00:07:26,650 --> 00:07:29,850
ahora y una etiqueta con todos los divs desaparecidos por completo.

102
00:07:30,100 --> 00:07:36,520
Y si comento esa línea y la actualizo puedes ver dónde comienzan aquí tres divisiones y hago clic

103
00:07:36,520 --> 00:07:39,130
en el botón y todo lo que sucede.

104
00:07:39,160 --> 00:07:42,910
Se desvanecen y luego se muestra en ninguno.

105
00:07:42,910 --> 00:07:51,340
Entonces si puse mi código en el lugar equivocado y ejecuté el método Remove aquí, eliminé todos

106
00:07:51,430 --> 00:07:52,850
los divs dot.

107
00:07:52,900 --> 00:07:57,080
Lo que realmente sucedería es que la orden no está garantizada.

108
00:07:57,280 --> 00:07:59,210
Y esto tomará un segundo completo.

109
00:07:59,410 --> 00:08:01,800
Y este código no esperará a que termine ese segundo.

110
00:08:01,930 --> 00:08:06,410
Por lo tanto, comenzará a desaparecer y luego ejecutar eliminar inmediatamente después.

111
00:08:06,610 --> 00:08:13,150
Entonces eso termina luciendo así, donde comienza a desvanecerse e inmediatamente después de eliminarlos.

112
00:08:13,780 --> 00:08:16,450
Entonces, básicamente, no se desvaneció en absoluto.

113
00:08:16,480 --> 00:08:17,110
Entonces esa es la razón por la cual J.

114
00:08:17,110 --> 00:08:21,940
Corey proporciona esta devolución de llamada porque es bastante común para nosotros querer hacer algo después de

115
00:08:21,940 --> 00:08:26,810
que nos desvanezcámos algo o después de que bajemos algo o lo que sea que sea la animación.

116
00:08:26,830 --> 00:08:30,760
Así que eso me lleva a mi siguiente punto, que es que quiero mostrar algunas de

117
00:08:30,760 --> 00:08:33,790
las otras animaciones que podemos hacer para que también podamos desvanecer las cosas.

118
00:08:34,030 --> 00:08:40,920
Entonces, si configuro la pantalla para que no sea ninguna al principio, así, y actualizo.

119
00:08:41,020 --> 00:08:46,780
No vemos los divs porque ahora están ocultos en lugar de desvanecerlos cuando hacemos clic podemos

120
00:08:46,780 --> 00:08:49,840
desvanecerlos y funciona de la manera que cabría esperar.

121
00:08:49,840 --> 00:08:55,720
Haga clic en el botón y se desvanecen en más de un segundo y luego, si queremos ejecutar algún código después, cuando sepamos

122
00:08:55,720 --> 00:09:00,350
que ya se han desvanecido, podemos poner un código y decir si la devolución de llamada está aquí.

123
00:09:00,970 --> 00:09:02,310
Está bien, así que es Faden.

124
00:09:02,350 --> 00:09:09,610
GK proporciona un método de fade más agradable que se llama Faid toggle y Faid toggle funciona de la misma manera.

125
00:09:10,660 --> 00:09:16,330
Proporciono un número de milisegundos y sabrá si necesita atenuar algo dentro o fuera dependiendo de si

126
00:09:16,330 --> 00:09:18,080
se muestra o no actualmente.

127
00:09:18,310 --> 00:09:25,360
Así que si actualizo y hago clic en Fade toggle, comienza alimentándolos a todos y luego desvaneciéndolos

128
00:09:25,360 --> 00:09:27,020
y volviendo a entrar.

129
00:09:27,040 --> 00:09:32,500
Básicamente es como agregar una clase a la lista de la clase o alternar la clase con

130
00:09:32,500 --> 00:09:35,860
Jay Querrey, donde simplemente decide si necesita desvanecerse o desvanecerse.

131
00:09:35,860 --> 00:09:43,960
Está bien, así que está desapareciendo el próximo conjunto de efectos que quiero demostrar son estos efectos deslizantes.

132
00:09:44,320 --> 00:09:49,170
Así que aquí abajo tenemos un tobogán deslizable para deslizar y deslizar hacia arriba.

133
00:09:49,240 --> 00:09:55,270
Así que comenzaré con la diapositiva hacia abajo y lo que hace es tomar un elemento que actualmente no muestra

134
00:09:55,270 --> 00:10:00,640
en lugar de animar la opacidad en un elemento como Faid realmente anime la altura de un elemento.

135
00:10:01,090 --> 00:10:03,030
Entonces te mostraré cómo funciona eso.

136
00:10:03,130 --> 00:10:04,300
Vamos a cambiar esto.

137
00:10:04,300 --> 00:10:07,870
En lugar de desvanecernos, nos deslizaremos hacia abajo.

138
00:10:08,650 --> 00:10:11,810
Y eso es porque cuando actualizamos nuestros elementos están ocultos.

139
00:10:11,920 --> 00:10:19,000
Entonces, si ejecuto la diapositiva hacia abajo cuando hago clic en un botón, verá que la altura está animada hacia abajo y lo

140
00:10:19,000 --> 00:10:21,270
mismo ocurre con la diapositiva hacia arriba.

141
00:10:21,400 --> 00:10:22,420
Hace lo contrario.

142
00:10:22,480 --> 00:10:26,360
Entonces, si me deshago de la pantalla para que se muestren.

143
00:10:26,710 --> 00:10:28,630
Y ahora hago clic en el botón.

144
00:10:28,630 --> 00:10:33,590
Su altura está animada y se deslizan hacia arriba y luego se muestran configuradas como Ninguna al final.

145
00:10:33,910 --> 00:10:41,540
Y el otro método es el control deslizante que funciona igual que Faid alternar donde decide qué hacer.

146
00:10:41,650 --> 00:10:48,090
Entonces, si hago clic, se deslizan hacia arriba y ahora se deslizan hacia abajo y hacia arriba y hacia abajo.

147
00:10:48,370 --> 00:10:51,740
Así que eso es todo lo que hay para deslizarse hacia arriba y deslizar la palanca.

148
00:10:51,760 --> 00:10:54,320
Eran como los métodos analógicos Faid.

149
00:10:54,610 --> 00:10:57,580
También hay una devolución de llamada opcional que podemos pasar.

150
00:10:57,790 --> 00:11:04,250
Si damos una duración de 1 segundo y luego puedo recuperar mi llamada.

151
00:11:04,600 --> 00:11:09,380
Y voy a hacer otra estafa. ese registro en la diapositiva final está hecho.

152
00:11:09,730 --> 00:11:15,250
Y eso solo se imprimirá una vez que haya finalizado la segunda diapositiva completa.

153
00:11:15,250 --> 00:11:16,130
Así que me actualizo.

154
00:11:16,270 --> 00:11:24,970
Miremos la consola y hacen clic en hacer clic en mí y puede ver que solo se imprimió una vez que se realizó

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

156
00:11:25,630 --> 00:11:28,380
Lo mismo aquí preste atención aquí mismo.

157
00:11:28,390 --> 00:11:31,330
Esto cambiará a seis.

158
00:11:31,330 --> 00:11:32,630
Aquí vamos.

159
00:11:33,290 --> 00:11:40,510
Pero nuevamente, un patrón más común es eliminar los elementos una vez que los hemos deslizado hacia afuera o desvanecido

160
00:11:40,510 --> 00:11:43,670
o lo que sea que hayamos hecho es eliminarlos.

161
00:11:43,690 --> 00:11:48,400
Así que aquí les tomará un segundo deslizarlos y luego se eliminarán de la página.

162
00:11:48,460 --> 00:11:53,970
Y si vamos a la pestaña de elementos, nuestro cuerpo está vacío, excepto por ese botón y el guión.

163
00:11:54,580 --> 00:11:58,810
Así que con suerte te dan una buena idea de cómo funcionan algunos de los efectos en una cantera.

164
00:11:58,810 --> 00:12:02,110
Estos son de lejos los más comunes de desvanecimiento y deslizamiento.

165
00:12:02,110 --> 00:12:06,190
Y vamos a usarlos en lugar de nuestra aplicación de la lista de tareas que vamos a comenzar en el próximo video.