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 “parpadeo” 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

❤Porque ocurre el parpadeo?

El “parpadeo” 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 “container” y al “item” le dio palevioletred al “item” 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!