Información del post ⇣

Animación vertical con css grid

Históricamente este problema siempre se ha resuelto con max-height: 90vh; o similar, esto producía efectos no deseados, haciendo que la animación de ocultación tenga algunos comportamientos extraños al retrasarse hasta que la altura del contenedor era la heredada.

Ahora con css grid podemos controlar este efecto mediante la unidad fr una unidad que se adapta al contenido y es flexible, lo que permite una animación más fluida.

Demo en codepen

En un layout de tres filas (rows) grid-template-rows: auto auto 0fr 40px; podemos hacer que el contenido a ocultar ocupe 0fr y al expandirse 1fr de esta manera podemos animar su aparición/desaparición.


Links relacionados