Transiciones Css con tamaños desconocidos y no declarados 2.6.13
O de cómo lograr transiciones animadas en elementos con tamaño final (anchura o altura) desconocido.
Transiciones Css con tamaños desconocidos y no declarados
Para que funcionen las transiciones Css aplicadas a tamaños (tanto anchuras como alturas) se necesita conocer a priori los valores inicial y final.
Así, no hay problema para animar un elemento con anchura (o altura) inicial de 0 a cualquier otro valor final declarado.
La cuestión es que en muchas situaciones este valor final no se puede conocer de antemano. Como por ejemplo una lista con número de opciones mayor o menor en función de la selección que haga el usuario. Porque si se declara como valor final auto la transición es instantánea. O dicho de otra forma: no hay transición.
La solucción
Si necesitas que un elemento pase de una anchura X a otra Y pero desconoces este último valor la solucción para que funcionen las transiciones es no usar la propiedad width | height. En su lugar declara utiliza las propiedades max-width | max-height con un valor lo suficientemente grande como para tener la certeza de que nunca se quedará pequeño.
Ver en CodepenEl código Css simplificado
.redes {
max-height: 0;
transition: max-height 2s linear;
}
.menu li:hover .redes {
max-height: 500px;
}
 desconocido.){kind=link}
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso