2011-07-05 6 views
17

consulte el siguiente jsFiddlealtura de transición webkit para un div con una altura de cambio dinámico en función del contenido?

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

Puede hacer clic en los distintos botones que muestra diferentes contenidos longitud que hace que el cuadro de crecer/encogerse.

quiero que el cambio de altura a ser animado por lo que no está tan nervioso, probé esto añadiendo:

-webkit-transition: all 1s linear; 

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

Gracias

Respuesta

6

Me temo que no hay manera de animar altura con transiciones CSS3 sin algún tipo de asistencia Javascript, echa un vistazo a:

How can I transition height: 0; to height: auto; using CSS?

Can you use CSS3 to transition from height:0 to the variable height of content?

Además, su código va desde la pantalla: ninguno para mostrar: bloque, lo que no tendría ningún efecto sobre la altura en ningún caso. En lugar de mostrar ninguna, use height: 0 con overflow: hidden;

+0

eso es de mala ¿cuál es la mejor solución JS? thxs – TheExit

+7

intente animar con max-height: http://jsfiddle.net/leaverou/zwvNY/ – stereoscott

Cuestiones relacionadas