Errores Comunes en Transitions

Lo que no debes hacer

Escribir transiciones es muy fácil, pero escribir transiciones libres de bugs, con buen rendimiento y que se sientan profesionales requiere evitar algunas trampas clásicas. A continuación, exploraremos los errores más comunes.

1. Definir la transición en el pseudo-estado

Este es el error número uno. Si escribes tu regla transition: all 0.3s dentro del bloque :hover, la animación solo existirá mientras el cursor esté encima. Cuando retiras el cursor, la regla desaparece y el elemento vuelve a su estado normal bruscamente. Solución: Define siempre la transición en la clase original del elemento.

2. Animar de display: none a display: block

Como explicamos en la lección anterior, display no puede interpolarse matemáticamente. Solución: Usa opacity y visibility, o si usas frameworks de JS, usa librerías de montaje/desmontaje.

3. Animar hacia o desde "auto"

Si tienes un menú desplegable (accordion) con height: 0 y al hacer hover le pones height: auto, la transición no funcionará. El navegador necesita números exactos para calcular los fotogramas. Solución: Usa max-height (por ejemplo, transiciona de 0 a 1000px) o usa la moderna propiedad grid-template-rows: 0fr a 1fr.