css - propiedad - que es el modelo flexbox

¿Webkit: transición de altura para un div con una altura cambiante dinámica basada en el contenido?

Question

por favor vea el siguiente jsFiddle

http://jsfiddle.net/SgyEW/10/

Puede hacer clic en los distintos botones que muestran un contenido de diferente longitud que hace que el cuadro aumente o disminuya.

Quiero que el cambio de altura sea animado, por lo que no es tan rápido. Intenté esto agregando:

-webkit-transition: all 1s linear;

Pero eso no tiene efecto en este caso de uso. ¿Alguna idea en términos de una solución que no requiere JavaScript?

Gracias

Answer 1

Me temo que no hay manera de animar la altura con las transiciones CSS3 sin un poco de ayuda con Javascript, echa un vistazo a:

¿Cómo puedo hacer la transición de altura: 0; a la altura: auto; usando CSS?

¿Se puede usar CSS3 para pasar de altura: 0 a la altura variable del contenido?

Además, su código pasa de mostrar: ninguno a mostrar: bloque, que en cualquier caso no tendría un efecto en la altura. En lugar de mostrar ninguna, use altura: 0 con desbordamiento: oculto;