Hola a todos. En esta conferencia vamos a hablar de transiciones. Usted ha visto en diferentes ejemplos que podemos cambiar el estado de los elementos. Los enlaces pueden pasar de enlace regular a visitado. Puedes pasar el cursor sobre las cosas. Puedes enfocarlos. Bueno, ¿y si realmente quieres tener un poco de casi animación cuando haces estas cosas? Para eso podemos usar transiciones. Por lo tanto, si pasa el cursor sobre el enlace, puede cambiar el color. Si una imagen entra en el foco, lo que significa que has colocado pestañas en ella, puedes cambiar el tamaño. Y es sólo estas pequeñas cosas que a veces, cuando estás haciendo tu página, te da ese pequeño factor genial que has estado buscando, para demostrar que realmente estás empezando a comprender estos conceptos. Así que empecemos. Si desea agregar transiciones a su página, hay cuatro propiedades que querrá ver. El primero es la propiedad de transición real. ¿ Qué es lo que quieres cambiar? ¿ Quieres cambiar el tamaño, el color, la posición, todos ellos? ¿ Qué pasa con la duración de la transición? ¿ Cuánto tiempo debe durar cada transición? Pueden suceder muy rápidamente, donde la gente casi ni siquiera se da cuenta, o puede ser muy largo y extraído. El tiempo de transición es, es un poco extraño, pero es esta idea de, si vas a hacer algo más grande, ¿quieres hacerlo lentamente más grande y lineal todo al mismo tiempo o quieres que se facilite o alivie? En realidad se puede cambiar cómo, el tipo de velocidad que está haciendo las diferentes cosas. El retraso de la transición es, ¿quieres que espere, debería esperar el navegador antes de que comience a realizar la transición? Si alguien está flotando, ¿quieres que flote durante dos segundos antes de continuar? Es posible que quieras pensar en esto, porque a veces cuando la gente está mirando tu página, tienen, sólo tienen el ratón dando vuelta. Y no quieres que vean las transiciones a menos que realmente necesiten concentrarse en ese elemento. Muy bien. Así que sigamos adelante y comencemos. Si desea usar transiciones, lo primero que debe hacer es justo lo que ha estado haciendo todo el tiempo, definir su elemento y decir qué estilo desea que tenga cuando cargue la página por primera vez. A continuación, desea elegir qué elementos desea realizar la transición. Por lo tanto, es posible que le haya aplicado un estilo con color de fondo, color, ancho y alto. No necesariamente quieres cambiar todas esas cosas cuando entras en tu transición. Así que elige los que quieres cambiar. En tercer lugar, definir los nuevos valores para esos elementos. Y esto es importante. Debe combinar este paso con una pseudo-clase. Debe estar junto con un desplazamiento o un enfoque o un activo. Así que veamos algún código solo en la pantalla, y luego te ejecutaré a través de un ejemplo real. Así que aquí, he ido, seguí adelante y definí un div para solo tener color, fondo, altura de línea, altura de ancho, todas las cosas típicas. Si lo nota, el radio del borde es bastante pequeño. Son sólo seis píxeles. Luego entré y dije, ¿sabes qué? Voy a seguir adelante y definir cada una de estas propiedades. Entonces, mis propiedades que quiero cambiar serán el color, el ancho, el fondo y el radio del borde. Esto es bastante, pero quería un gran ejemplo. Puedes decir, quiero que tome medio segundo, quiero que todo sea casi el mismo cambio, y quiero que esperes medio segundo antes de comenzar esa transición. El último paso, el que tenía que ver con la pseudo-clase, fue agregar el div:hover y dar los nuevos valores que quiero que todo sea. Así que en lugar de ser negro, quiero cambiarlo a blanco. En lugar de que el ancho sea de 250 píxeles, quiero que sea 350 , color de fondo diferente y un radio de borde mucho más grande. ¿ Todo bien? Así que sigamos adelante y veamos un ejemplo que tengo. Ya he codificado para mostrarte. Entonces, en este ejemplo, he usado una hoja de estilo interna, en parte porque la mayor parte de mi HTML está justo aquí abajo. Todo lo que tengo es un div. Cómo he diseñado es decir que por ahora, cuando alguien pasa el cursor sobre este div, quiero que cambies el color con el fondo y el radio del borde. Y también he puesto en activo, solo porque quería mostrarte que puedes hacer varios estados diferentes. Activo, si lo has hecho, tal vez no lo recuerdes, es cuando estás haciendo clic en un estado. Así que echemos un vistazo. Aquí está mi transición, solo por defecto, cuando estás mirando la página. Ahora, cuando el ratón sobre él, se puede ver que es un cambio genial de color y radio de borde. En realidad, el radio de borde puede cambiar las cosas de parecer un cuadrado a parecer un círculo. La última es que ahora voy a mantener pulsado el ratón y vamos a ver qué pasa cuando el estado entre en activo. Puedes ver, una vez más, que he cambiado todas esas cosas. En realidad creo que esto es genial. Sin embargo, también puede ser muy distraedor. Por lo tanto, desea utilizar las transiciones con moderación para asegurarse de que no está quitando cosas de su página. Es posible y muy común usar la taquigrafía cuando está escribiendo sus diferentes transiciones. En lugar de escribir duración de transición , propiedades, diferentes cosas como esas, puedes ponerlo todo en una sola línea. Este está diciendo que quiero cambiar el fondo, debería tomar 2 segundos, y quiero facilitar o quiero que sea una transición lineal. Aquí, está diciendo que quiero seguir adelante y cambiar el radio de frontera, cuánto tiempo debe tomar, el tipo de transición y cuánto tiempo desea retrasar. Entonces, cuando miras el código de otras personas, no te confundas si no se parece a mi primer ejemplo. Probablemente han estado usando los atajos. Muy bien. Así que espero que haya sido un poco genial y estás emocionado de ir a implementar algún tipo de transiciones en tu página. Jugar con ellos también hará más que hacer que su sitio se vea un poco colorido y activo. Le dará práctica sobre la comprensión de estas diferentes pseudo-clases y estados como activos, enfocados, flotantes, etc. Pero recuerde que la accesibilidad siempre va a ser un problema cuando se trata de diferentes estados en la página. No es necesario que la gente vaya a pasar el ratón sobre tu página. No requiera que la gente vaya a pasar. Quieres asegurarte de que todo tu contenido esté siempre disponible, y simplemente mantener esas transiciones para algo un poco más que añadir a tu sitio. Buena suerte.