soy Kseso y esto EsCSS

Transiciones Css con tamaños desconocidos y no declarados

Transiciones Css con tamaños desconocidos y no declarados

·Por Kseso ✎ 0

transform sin medidas declaradasPara 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 Codepen

El código Css simplificado

.redes { max-height: 0; transition: max-height 2s linear; } .menu li:hover .redes { max-height: 500px; }

avatar del Editor del blog

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 Don Kseso Kseso