¡Alerta de truco CSS de buena fe! Nelson Menezes descubrió una nueva forma (que solo funciona en Firefox por ahora) que es tremendamente inteligente.
Quizás sepa que CSS no puede animar auto dimensiones, lo cual es super desafortunado. La animación de cero a “lo que sea necesario” sería muy útil muy a menudo. Hemos documentado las técnicas disponibles. Se reducen a:
- Animar el
max-heighta algo más de lo que necesita, lo que hace que la sincronización sea imprecisa y torpe. - Use JavaScript para medir el tamaño final y animarlo, lo que significa … usar JavaScript.
La técnica de Nelson no es ni de ésas, ni de algunas transform-basada en forma con incomodidad visual. Esta técnica utiliza CSS Grid en su núcleo …
.expander {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 1s;
}
.expander.expanded {
grid-template-rows: 1fr;
}Increíblemente, en Firefox, eso cambia el contenido dentro de esa área entre 0 y la altura natural del contenido. Solo hay un poco más, como ocultar el desbordamiento y la visibilidad para que se vea bien mientras se mantiene la accesibilidad:
Eso es maravilloso. Consigamos algunas estrellas sobre este tema y tal vez Chrome lo capte. Pero, por supuesto, sería incluso mejor si auto las transiciones de altura recién empezaron a funcionar. No puedo imaginar que eso esté totalmente fuera del ámbito de lo posible.