Mientras trabajaba en una publicación reciente que utilizaba transiciones CSS, me topé con algunas revelaciones interesantes por accidente. Cambiar la ubicación de la sintaxis de transición puede tener un efecto dramático en cómo se realiza la transición.
Hoy vamos a repasar las diversas opciones para la sintaxis de transición de CSS y cómo afecta cada una a la animación, ya sea que el mouse ingrese o salga de un mouse.
Eventos del ratón en CSS
Las transiciones CSS nos brindan la increíble capacidad de implementar animaciones simples sin JavaScript. Sin embargo, ya que realmente no se habla mucho de esto en CSS, se podría pensar que la diferencia entre los efectos de su mouse y el mouse out sería algo que se considera en el reino de JavaScript. Después de todo, no hay soporte para algo como esto:
Sin embargo, resulta que de hecho puede controlar efectivamente estas dos variables diferentes. Simplemente no es un proceso muy intuitivo. Echemos un vistazo a cómo funciona.
Si desea omitir la discusión e ir directamente a la sintaxis, CSS Tricks tiene un buen ejemplo de esta técnica.
La sintaxis normal: la entrada y la salida del mouse son iguales
Hay algunas maneras diferentes en las que podemos aplicar una transición CSS. El primero que veremos es el valor predeterminado antiguo, lo que significa que usaremos la sintaxis estándar que encontrará si ejecuta una búsqueda en Google sobre cómo implementar una transición CSS.
Para fines de experimentación, mantendremos la demostración simple. Queremos que la transición para animar el cambio de un cuadrado negro a un círculo gris. Así es como se ve (los prefijos del navegador se omiten por limpieza):
El comportamiento de esta animación es típico. Cuando se desplaza sobre el cuadrado negro, en el transcurso de un segundo gira alrededor de su radio de borde de 100px y cambia de color, lo que lo convierte en un círculo gris. Luego, cuando sacas el ratón, sucede lo contrario. Los giros cuadrados en el sentido contrario a las agujas del reloj hasta su posición original tienen un radio de borde que disminuye constantemente y su color vuelve a ser negro.
Manifestación: Haga clic aquí para ver este ejemplo en acción.
Sintaxis invertida: sin transición de ratón hacia fuera
En el ejemplo anterior, colocamos la sintaxis de transición en el #loremdiv selector. ¿Qué sucede si revertimos esto y colocamos el mismo fragmento dentro de la #loremdiv: hover ¿selector?
A pesar de que se siente mal, resulta que esto todavía produce una transición. De todos modos, eso solamente produce una transición en el evento de activación, cuando el usuario sale de la activación, la transformación es inmediata.
Esto nos da de manera efectiva lo que buscábamos: una forma de variar las transiciones del mouse in y mouse out. Sin embargo, el mouse out no es una transición en absoluto en este punto, lo que no es muy emocionante.
Manifestación: Haga clic aquí para ver este ejemplo en acción.
Sintaxis duplicada: dos transiciones personalizables
Ahora hemos intentado vincular la transición al selector normal y hemos intentado colocarlo en el selector de desplazamiento, ahora veamos qué sucede cuando colocamos una transición en ambos lugares
Tenga en cuenta que he reducido la cantidad de tiempo en la primera transición para que podamos decir lo que hace. Curiosamente, el resultado aquí es lo contrario de lo que mucha gente espera.
Intuitivamente, puede llegar a la conclusión de que la primera declaración de transición se aplicará con el mouse y la segunda con el mouse out. Sin embargo, lo opuesto es verdadero. Como descubrimos en nuestro último ejemplo, el fragmento de código asociado con el selector de desplazamiento del mouse afecta al mouse en caso de que salga el otro para que salga el mouse.
Ahora tenemos la configuración que estábamos buscando! Esto nos da total libertad para variar los efectos del mouse dentro y fuera del mouse. Lo que he hecho con este ejemplo es reducir la cantidad de tiempo que tarda la animación en completarse cuando el usuario abandona el cursor.
Manifestación: Haga clic aquí para ver este ejemplo en acción.
Variando los efectos
Llevando esta idea aún más lejos, no solo puede variar el tiempo, también puede variar la propiedad y la función de tiempo. Aquí hay un ejemplo:
Aquí me quedé con la misma animación que hemos estado usando para el evento de desplazamiento, pero cuando el usuario sale del desplazamiento, lo único que anima es el radio del borde.
Manifestación: Haga clic aquí para ver este ejemplo en acción.
Conclusión
En resumen, hay tres formas básicas en las que puede abordar las transiciones de CSS. La primera forma es vincular la transición a un selector que no se desplaza. Esto hace que la transición hacia adentro y hacia afuera sea igual (solo en reversa, por supuesto). La segunda forma es vincular la transición a un selector de desplazamiento. Esto crea un desplazamiento en la transición pero elimina la transición al pasar el ratón.
Finalmente, la tercera forma es vincular las transiciones a ambos selectores.En este caso, la transición sin desplazamiento afectará a la flotar fuera evento y la transición flotante afectará la flotar en evento. Esta es la técnica que querrá utilizar si desea el mayor control sobre los eventos separados.
Deja un comentario a continuación y déjanos saber qué piensas de todo esto. ¿Alguna vez has notado que eran posibles eventos separados de entrada / salida? ¿Ha utilizado esto de alguna manera?