css3 hauteur transition ne fonctionne pas

j'ai un problème à l'aide de transitions css3
comment puis-je faire la transition en douceur, il apparaît instantanément
je veux la div boîte à changer peu à peu de sa hauteur quand je planer sur elle

le code html

<div id="imgs">

<img src="http://chat.ecobytes.net/img/emoticons/smile.png" alt=":)" title=":)" />
<img src="http://chat.ecobytes.net/img/emoticons/sad.png" alt=":(" title=":(" />
<img src="http://chat.ecobytes.net/img/emoticons/wink.png" alt=";)" title=";)" />
<img src="http://chat.ecobytes.net/img/emoticons/razz.png" alt=":P" title=":P" />
<img src="http://chat.ecobytes.net/img/emoticons/grin.png" alt=":D" title=":D" />
<img src="http://chat.ecobytes.net/img/emoticons/plain.png" alt=":|" title=":|" />
<img src="http://chat.ecobytes.net/img/emoticons/surprise.png" alt=":O" title=":O" />
<img src="http://chat.ecobytes.net/img/emoticons/confused.png" alt=":?" title=":?" />
<img src="http://chat.ecobytes.net/img/emoticons/glasses.png" alt="8)" title="8)" />
<img src="http://chat.ecobytes.net/img/emoticons/eek.png" alt="8o" title="8o" />
<img src="http://chat.ecobytes.net/img/emoticons/cool.png" alt="B)" title="B)" />
<img src="http://chat.ecobytes.net/img/emoticons/smile-big.png" alt=":-)" title=":-)" />

</div>

jsfiddle

source d'informationauteur SRN

  1. 17

    Je crois que vous devez définir une hauteur spécifiée au lieu de l'auto. http://jsfiddle.net/BN4Ny/ ce n'est une belle progression. Vous ne savez pas si vous voulais que peu de clôturer la réalité. Je viens de fourche de votre jsfiddle et a ajouté une hauteur spécifiée.

  2. 3

    Voici comment vous pouvez le faire: http://jsfiddle.net/minitech/hTzt4/

    De garder un flexible de la hauteur, JavaScript est une nécessité, malheureusement.

  3. 3

    Au lieu d'utiliser un ensemble de hauteur, sur un conteneur ou de l'utilisation de JS (qui sont à la fois maladroite de solutions)... Vous pouvez mettre les images dans les éléments de la liste et de travailler votre transition sur le li.

    Si toutes les images sont d'aller à une même hauteur cela signifie que votre contenu à l'intérieur du conteneur peut encore être dynamique. Par exemple...

    /*
CLOSED
*/

div.container li 

{  height:0px;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}

/*
OPEN
*/

div.container:hover li 

{  height:30px;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}