Comment puis-je effectuer une transition height:0;height:auto;
P粉461599845
2023-08-27 11:59:03
<p>J'essaie d'utiliser des transitions CSS pour faire glisser <code></code></p><ul> <p><br /></p>
<p><code></code></p><ul> Commence à <code>hauteur : 0;</code>. Au survol, la hauteur est définie sur <code>height:auto;</code>. Cependant, cela entraîne simplement l'apparition de <em> sans transition </em>
<p>Si je passe de <code>height: 40px;</code> à <code>height: auto;</code>, il glisse jusqu'à <code>height: 0;< /code> puis sautez soudainement à la bonne hauteur. </p>
<p>Comment puis-je procéder autrement sans utiliser JavaScript ? </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">#child0 {
hauteur : 0 ;
débordement caché;
couleur d'arrière-plan : #dedede ;
-moz-transition : hauteur 1s facilité ;
-webkit-transition : hauteur 1s facilité ;
-o-transition : hauteur 1s facilité ;
transition : hauteur 1s facilité ;
}
#parent0:survolez #enfant0 {
hauteur : automatique ;
}
#enfant40 {
hauteur : 40px ;
débordement caché;
couleur d'arrière-plan : #dedede ;
-moz-transition : hauteur 1s facilité ;
-webkit-transition : hauteur 1s facilité ;
-o-transition : hauteur 1s facilité ;
transition : hauteur 1s facilité ;
}
#parent40 : survolez #enfant40 {
hauteur : automatique ;
}
h1 {
poids de la police : gras ;
}</pré>
<pre class="brush:html;toolbar:false;">La seule différence entre les deux extraits de CSS est que l'un a une hauteur : 0, l'autre une hauteur : 40.
<hr>
<div id="parent0">
<h1>Survolez-moi (hauteur : 0)</h1>
<div id="child0">Certains contenus
<br>Certains contenus
<br>Certains contenus
<br>Certains contenus
<br>Certains contenus
<br>Certains contenus
<br>
</div>
</div>
<hr>
<div id="parent40">
<h1>Survolez-moi (hauteur : 40)</h1>
<div id="child40">Certains contenus
<br>Certains contenus
<br>Certains contenus
<br>Certains contenus
<br>Certains contenus
<br>Certains contenus
<br>
</div>
</div></pre>
<p><br /></p></ul></ul>
Vous devriez utiliser scaleY.
J'ai créé une version préfixée par le fournisseur du code ci-dessus sur jsfiddle et j'ai modifié votre jsfiddle pour utiliser scaleY au lieu de height.
Modifier Certaines personnes n'aiment pas
scaleY
转换内容的方式。如果这是一个问题,那么我建议使用clip
à la place.Utilisez
max-height
,而不是height
。并将max-height
dans la transition et définissez la valeur sur une valeur supérieure à celle de votre boîte.Voir la réponse de Chris Jordan ici dans une autre démo JSFiddle /stackoverflow.com/a/20226830/18706">