Dar una buena acogida.
Entonces, cuando inicialmente presenté Jay queery, mencioné que nos ayuda a hacer cosas como seleccionar elementos
para manipularlos en los oyentes del evento.
Y también mencioné que ayuda con los efectos y las animaciones.
Así que en este video voy a hacer una vista previa rápida de algunos de los
efectos incorporados, en particular, voy a mostrar dos amplias categorías de efectos de desvanecimiento de efectos y diapositivas.
Así que estoy en los muelles de Jay Corey aquí en la categoría de efectos.
comenzaré mostrando los efectos de desvanecimiento, así que voy a ver el fundido de salida para comenzar.
Puede ver que hay bastantes métodos que tienen que ver con los efectos y
Lo que hace fadeout es seleccionar un elemento con un signo de dólar o un
conjunto de elementos y lo llama fundido y animará ese elemento desde una opacidad total hasta una transparencia total
u opacidad cero.
Por lo tanto, básicamente se desvanece un elemento y puede proporcionar una duración si desea que sea lento o rápido
o muy lento.
Puede proporcionar una cantidad de milisegundos.
400 milisegundos y luego puede proporcionar una devolución de llamada para ejecutar al final que mostraré en un momento.
El valor predeterminado es
Así que voy a hacer un nuevo archivo aquí para demostrar esta demostración del estudio de efectos y copiaré nuestra estructura
desde la última página de demostración y esta llamará a los efectos de J Querrey.
Así que tenemos esa configuración y voy a deshacerme de todo este contenido aquí y
luego voy a agregar unos pocos divs.
Hagamos tres divs y vamos a usar estos divs y desvanecerlos, animarlos y deslizarlos
arriba y abajo.
a darles un poco de contenido dentro de este primero serán estos no me desvanezcan el próximo.
Y entonces voy
Te lo ruego, por favor.
Y finalmente, tendremos uno que diga Ayuda para ayudar.
Entonces estos divs están desesperados por no desvanecerse.
Lamentablemente, hoy no es su día de suerte.
Y vamos a luchar contra ellos.
Para aclarar esto, voy a agregar algo de estilo aquí a nuestras vidas para que tengan un
color que podamos ver desvanecerse.
Y también tienen un ancho y una altura que podemos ver deslizar hacia arriba y hacia abajo.
Así que voy a seleccionar todos los divs y les daré un con 100 píxeles y una altura
de 100 píxeles y un fondo de color de verde azulado y ahorremos y lo abriremos.
Tenemos tres divs.
Sin embargo, me gustaría que estén en la misma línea.
Entonces, una forma de hacerlo es con el flotador a la izquierda.
Ahora todos están en la misma línea, pero se desangran el uno al otro.
Entonces, para solucionarlo, podemos agregar un margen.
Así que haremos un margen de 20 píxeles en todos los lados.
Ahora terminamos con tres cuadrados y cada uno tiene algo de texto dentro y realmente no es necesario ir
por el estilo porque todo lo que vamos a hacer es demostrar cómo podemos encajarlos dentro y fuera.
Así que vamos a agregar un botón arriba aquí y este botón simplemente dirá clic en mí.
Y cuando hacemos clic en este botón, lo que sucederá es que nuestras animaciones se ejecutarán.
Así que hago clic en esto y estos tres elementos deberían desaparecer para comenzar.
Por lo tanto, para reiterar el desvanecimiento se tomará un elemento de opacidad completa o cualquier opacidad en la que se encuentre
actualmente y se desvaneció hasta el punto de transparencia total.
Por lo tanto, se parece a este select fadeout de punto y podemos proporcionar una cadena opcional de velocidad tan
lenta o rápida o podemos darle un número de milisegundos.
Así que déjame mostrarte eso ahora.
De hecho, voy a hacer esto en un archivo separado, así que crearé un archivo javascript y lo guardaré.
Lo llamaré afecta solo la seguridad del genio seguro que tenía
mi alerta conectada y vinculó esto correctamente en la parte inferior.
Solo agrega una etiqueta de script.
Fuente igual a efectos
Sí.
Y si actualizamos, obtenemos nuestra alerta conectada.
Entonces, lo que queremos hacer aquí es Faid these divs out.
Entonces tenemos que seleccionar el dispositivo así y no desvanecerse.
Y luego podemos proporcionar una velocidad o simplemente dejarlo así.
Y si eso es todo lo que queremos hacer o actualizar y puedes ver como la página carga, comienzan a desvanecerse.
Entonces hagamos que eso suceda cuando hagamos clic en el botón.
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.
Así que vamos a querer hacer
Entonces, cuando hagamos clic en, se desvanecerán todos los divs así y ahora se actualizarán y si hago clic se
puede ver que se desvanecen.
Entonces como mencioné podemos proporcionar un número aquí algo así como 1000 que es un segundo completo.
Y si actualizo verá que cuando hago clic tarda un segundo completo para que desaparezca.
Un punto importante acerca de fadeout es que si inspecciono la página aquí y miro los elementos, los divs todavía están
en el equipo, ya sea en el dormitorio.
Simplemente no los vemos porque su pantalla se ha configurado en ninguno.
Por lo tanto, no los elimina o no los elimina de la página.
Es solo esconderlos.
Y esa es definitivamente una distinción importante.
Entonces, digamos que solo quería imprimir un mensaje una vez que los divs se habían
desvanecido para poder desvanecerlos y luego hacer algo como este fundido completado al anular el registro.
Y si ejecuto esto, abriré la consola y observaré el orden en que suceden las cosas.
Así que cuando hago clic aquí obtengo Faid completado mucho antes de que el fade se termine.
Entonces, lo que sucede aquí es que seleccionamos todos los divs y comenzamos el fade out pero lleva un segundo completo.
Y javascript no espera a que termine ese segundo antes de pasar a la siguiente línea.
Inmediatamente se movió a esta línea e imprime Faid completado y luego termina el desvanecimiento.
Entonces, si queremos que el código suceda justo después de que finalice el fundido, queremos que se garantice que esté
después de que podamos pasar una devolución de llamada aquí.
Y así se llamará a esta devolución de llamada dentro de fadeout automáticamente cuando haya terminado.
Así que voy a mover nuestro registro constante allí mismo y guardar.
Y si actualizo y ahora hago clic en los acabados de fundido y luego obtenemos 3 registros de puntos de la consola completados por
Fade para cada uno de ellos.
Un escenario más común en lugar de simplemente imprimir una cadena en el cónsul es eliminar realmente los
elementos una vez que los desvanezcamos.
Así que mencioné que simplemente están ocultos, que en realidad no se han ido.
Y si quisiéramos eliminarlos como en nuestra lista de cosas por hacer, vamos a construir cuando hagamos clic en
el bote de basura al lado de un artículo que queremos que desaparezca lentamente y hagamos una buena animación.
Pero también elimine la página completamente del DOM.
Entonces, necesitamos usar un método llamado remove y solo queremos eliminarlo una vez finalizado el fadeout.
Entonces, parece que esto solo hará esto.
Y lo que esto hará es esperar hasta que se termine el fadeout.
Y para cada div ejecutará el método Remove en él.
Así que actualice y haga clic en hacer clic en mí.
Se desvanecen y luego, si pasamos a los elementos, puedes ver que nuestro cuerpo solo tiene un botón
ahora y una etiqueta con todos los divs desaparecidos por completo.
Y si comento esa línea y la actualizo puedes ver dónde comienzan aquí tres divisiones y hago clic
en el botón y todo lo que sucede.
Se desvanecen y luego se muestra en ninguno.
Entonces si puse mi código en el lugar equivocado y ejecuté el método Remove aquí, eliminé todos
los divs dot.
Lo que realmente sucedería es que la orden no está garantizada.
Y esto tomará un segundo completo.
Y este código no esperará a que termine ese segundo.
Por lo tanto, comenzará a desaparecer y luego ejecutar eliminar inmediatamente después.
Entonces eso termina luciendo así, donde comienza a desvanecerse e inmediatamente después de eliminarlos.
Entonces, básicamente, no se desvaneció en absoluto.
Entonces esa es la razón por la cual J.
Corey proporciona esta devolución de llamada porque es bastante común para nosotros querer hacer algo después de
que nos desvanezcámos algo o después de que bajemos algo o lo que sea que sea la animación.
Así que eso me lleva a mi siguiente punto, que es que quiero mostrar algunas de
las otras animaciones que podemos hacer para que también podamos desvanecer las cosas.
Entonces, si configuro la pantalla para que no sea ninguna al principio, así, y actualizo.
No vemos los divs porque ahora están ocultos en lugar de desvanecerlos cuando hacemos clic podemos
desvanecerlos y funciona de la manera que cabría esperar.
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
que ya se han desvanecido, podemos poner un código y decir si la devolución de llamada está aquí.
Está bien, así que es Faden.
GK proporciona un método de fade más agradable que se llama Faid toggle y Faid toggle funciona de la misma manera.
Proporciono un número de milisegundos y sabrá si necesita atenuar algo dentro o fuera dependiendo de si
se muestra o no actualmente.
Así que si actualizo y hago clic en Fade toggle, comienza alimentándolos a todos y luego desvaneciéndolos
y volviendo a entrar.
Básicamente es como agregar una clase a la lista de la clase o alternar la clase con
Jay Querrey, donde simplemente decide si necesita desvanecerse o desvanecerse.
Está bien, así que está desapareciendo el próximo conjunto de efectos que quiero demostrar son estos efectos deslizantes.
Así que aquí abajo tenemos un tobogán deslizable para deslizar y deslizar hacia arriba.
Así que comenzaré con la diapositiva hacia abajo y lo que hace es tomar un elemento que actualmente no muestra
en lugar de animar la opacidad en un elemento como Faid realmente anime la altura de un elemento.
Entonces te mostraré cómo funciona eso.
Vamos a cambiar esto.
En lugar de desvanecernos, nos deslizaremos hacia abajo.
Y eso es porque cuando actualizamos nuestros elementos están ocultos.
Entonces, si ejecuto la diapositiva hacia abajo cuando hago clic en un botón, verá que la altura está animada hacia abajo y lo
mismo ocurre con la diapositiva hacia arriba.
Hace lo contrario.
Entonces, si me deshago de la pantalla para que se muestren.
Y ahora hago clic en el botón.
Su altura está animada y se deslizan hacia arriba y luego se muestran configuradas como Ninguna al final.
Y el otro método es el control deslizante que funciona igual que Faid alternar donde decide qué hacer.
Entonces, si hago clic, se deslizan hacia arriba y ahora se deslizan hacia abajo y hacia arriba y hacia abajo.
Así que eso es todo lo que hay para deslizarse hacia arriba y deslizar la palanca.
Eran como los métodos analógicos Faid.
También hay una devolución de llamada opcional que podemos pasar.
Si damos una duración de 1 segundo y luego puedo recuperar mi llamada.
Y voy a hacer otra estafa. ese registro en la diapositiva final está hecho.
Y eso solo se imprimirá una vez que haya finalizado la segunda diapositiva completa.
Así que me actualizo.
Miremos la consola y hacen clic en hacer clic en mí y puede ver que solo se imprimió una vez que se realizó
la diapositiva.
Lo mismo aquí preste atención aquí mismo.
Esto cambiará a seis.
Aquí vamos.
Pero nuevamente, un patrón más común es eliminar los elementos una vez que los hemos deslizado hacia afuera o desvanecido
o lo que sea que hayamos hecho es eliminarlos.
Así que aquí les tomará un segundo deslizarlos y luego se eliminarán de la página.
Y si vamos a la pestaña de elementos, nuestro cuerpo está vacío, excepto por ese botón y el guión.
Así que con suerte te dan una buena idea de cómo funcionan algunos de los efectos en una cantera.
Estos son de lejos los más comunes de desvanecimiento y deslizamiento.
Y vamos a usarlos en lugar de nuestra aplicación de la lista de tareas que vamos a comenzar en el próximo video.