Pouvez-vous utiliser les CSS3 pour faire une transition entre height:0 et la hauteur variable du contenu ?

Question

Pouvez-vous utiliser les CSS3 pour passer de height:0 à la hauteur variable du contenu ?

Answer 1

Vous pouvez, avec un peu de jigging-pokery non sémantique. Mon approche habituelle est d'animer la hauteur d'un DIV externe qui a un seul enfant qui est un DIV sans style utilisé uniquement pour mesurer la hauteur du contenu.

function growDiv() {
  var growDiv = document.getElementById('grow');
  if (growDiv.clientHeight) {
    growDiv.style.height = 0;
  } else {
    var wrapper = document.querySelector('.measuringWrapper');
    growDiv.style.height = wrapper.clientHeight + "px";
  }
}

#grow {
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: 0;
  overflow: hidden;
  outline: 1px solid red;
}

<input type="button" onclick="growDiv()" value="grow">
<div id='grow'>
  <div class='measuringWrapper'>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
  </div>
</div>

On aimerait pouvoir se passer de l'aide de l'UE. .measuringWrapper Je pourrais simplement définir la hauteur du DIV sur auto et l'animer, mais cela ne semble pas fonctionner (la hauteur est définie, mais aucune animation ne se produit).

function growDiv() {
  var growDiv = document.getElementById('grow');
  if (growDiv.clientHeight) {
    growDiv.style.height = 0;
  } else {
    growDiv.style.height = 'auto';
  }
}

#grow {
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: 0;
  overflow: hidden;
  outline: 1px solid red;
}

<input type="button" onclick="growDiv()" value="grow">
<div id='grow'>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
</div>

Mon interprétation est qu'une hauteur explicite est nécessaire pour que l'animation fonctionne. Vous ne pouvez pas obtenir une animation sur la hauteur lorsque l'une des deux hauteurs (celle de début ou de fin) est auto .

Answer 2

Je pense avoir trouvé une solution robuste :

http://jsfiddle.net/adambiggs/MAbD3/

Ma solution consiste à faire passer la hauteur maximale à la hauteur exacte du contenu pour obtenir une animation fluide, puis à utiliser une fonction d'appel transitionEnd pour fixer la hauteur maximale à 9999px afin que le contenu puisse être redimensionné librement.

Answer 3

Je me rends compte que ce fil de discussion a vieilli, mais il est bien placé dans certaines recherches Google et je me dis qu'il mérite d'être mis à jour.

Il suffit également d'obtenir/de définir la hauteur de l'élément lui-même :

var load_height = document.getElementById('target_box').clientHeight;
document.getElementById('target_box').style.height = load_height + 'px';

Vous devez vider ce Javascript immédiatement après la balise de fermeture de target_box dans une balise inline script.

Answer 4

Vous devriez utiliser scaleY.

HTML :

<p>Here (scaleY(1))</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

CSS :

ul {
    background-color: #eee;
    transform: scaleY(0);    
    transform-origin: top;
    transition: transform 0.26s ease;
}

p:hover ~ ul {
    transform: scaleY(1);
}

J'ai fait une version préfixée par le vendeur du code ci-dessus sur jsfiddle, http://jsfiddle.net/dotnetCarpenter/PhyQc/9/

Answer 5

J'ai trouvé une très bonne solution avec une hauteur maximale :-)

Supposons que nous voulions passer d'une hauteur de 40 à un contenu quelconque.

initial{whatever styles to make your content  to be  at least 40  without setting height
max-height:40;
-webkit-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;

}

initial:hover{max-height: higher than your content will  ever get.}

si votre contenu initial est inférieur à la hauteur nécessaire, vous pouvez l'ajuster avec du padding ou de la hauteur de ligne, etc etc. de sorte que vous n'ayez pas à définir une hauteur mais une hauteur maximale. ensuite, vous pouvez effectuer une transition parfaite sans problème vers une hauteur maximale plus élevée. définissez la variable de transition à une taille maximale supérieure à celle de votre contenu.