No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Problemas de parpadeo

16/20
Recursos

El problema del parpadeo sucede cuando un accionador no se encuentra en el lugar donde deber铆a por la transformaci贸n. Por ejemplo, al realizar una animaci贸n pasa lo siguiente:

  • Al mover el cursor sobre un elemento se traslada hacia la izquierda.
  • Al trasladarse, deja de estar el cursor sobre el elemento, por lo que vuelve a su posici贸n inicial.
  • Al estar en su posici贸n inicial, el cursor est谩 sobre el elemento, entonces accionar谩 nuevamente la transformaci贸n.

La animaci贸n entr贸 en un ciclo que se observar谩 como un parpadeo, porque las transiciones entre hover y no hover son r谩pidas.

/* Mal */
div {
  width: 100px;
  height: 100px;
  background-color: purple;
}

div:hover {
  transform: translateX(45px);
}

驴C贸mo solucionar este problema?

Para solucionar el problema de parpadeo, coloca el elemento que se transformar谩 dentro de un contenedor. Despu茅s, utiliza el elemento contenedor como el accionador de la transformaci贸n del elemento. De esta manera, siempre se estar谩 haciendo hover en el sitio adecuado sin importar que el elemento cambie.

/* Bien */
/* Elemento contenedor */
.container {
  width: 100px;
  height: 100px;
}

/* Elemento a transformar */
.item {
  width: 100px;
  height: 100px;
  background-color: purple;
}

/* Trigger */ 
.container:hover .item {
  transform: translateX(45px);
}

Contribuci贸n creada por Andr茅s Guano.

Aportes 9

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

El 鈥減arpadeo鈥 se da porque cuando queremos hacer :hover en el item si este se mueve hay momentos donde no estamos haciendo :hover (ya que se va de donde esta nuestro puntero).

Al contener al item y hacer :hover en su container, por mas que el item se mueva, nunca dejamos de hacer :hover en el container ya que este no se mueve.

Conclusiones de la clase

.
En algunas ocasiones hay un leve parpadeo cuando transformamos un elemento. En este caso lo vimos cuando al momento de hacer :hover sobre el elemento hijo, se llevaba acabo un translado en el eje Y.
.
Este leve parpadeo en algunas ocasiones no se nota, ya que son algunos factores externos los que provocan este error. Sin embargo, los peque帽os detalles hacen la diferencia, no solo en las relaciones de pareja, sino en UX tambien.
.
Por lo tanto, para solucionar esto y que todos tus usuarios tenga la mejor experiencia posible, hay que agregarle el :hover al elemento padre para que el hijo sea el que haga la accion. Esto se hace de la siguiente manera:

.parent_element:hover child_element{
	Your: transformations;
}

馃嵖Problemas de parpadeo

鉂orque ocurre el parpadeo?

El 鈥減arpadeo鈥 se da porque cuando queremos hacer :hover en el item si este se mueve hay momentos donde no estamos haciendo :hover (ya que se va de donde esta nuestro puntero).

Al contener al item y hacer :hover en su container, por mas que el item se mueva, nunca dejamos de hacer :hover en el container ya que este no se mueve.

No sabia que la etiqueta de <style> funcionaba fuera de la etiqueta <head></head> ?

Para que se note mejor el parpadeo hay que hacer el translateY de 200px.

Falt贸 cambiar el selector div inicial por .container

Con frecuencia sucede que cuando hacemos hover en algunos de los elementos vemos como un leve parpadeo que hace que tengamos una mala experiencia como usuarios. La forma de solucionar esto es mediante un contenedor. El disparador de nuesto efecto va a ser el hover del contenedor, pero el elemento que va a reaccionar es otro.

si alguien se pregunta porque cambia de color, es porque no le dio un color distinto al 鈥渃ontainer鈥 y al 鈥渋tem鈥 le dio palevioletred al 鈥渋tem鈥 cuando se le est谩 haciendo hover al container, y le dio otro colo distinto al mismo item, cuando no se le est谩 haciendo hover a su container.

nice!