Comment puis-je effectuer une transition height:0;height:auto;
P粉461599845
P粉461599845 2023-08-27 11:59:03
0
2
465
<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>
P粉461599845
P粉461599845

répondre à tous(2)
P粉055726146

Vous devriez utiliser scaleY.

ul {
  background-color: #eee;
  transform: scaleY(0);    
  transform-origin: top;
  transition: transform 0.26s ease;
}
p:hover ~ ul {
  transform: scaleY(1);
}
<p>Hover This</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

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.

ul {
  clip: rect(auto, auto, 0, auto);
  position: absolute;
  margin: -1rem 0;
  padding: .5rem;

  color: white;

  background-color: rgba(0, 0, 0, 0.8);

  transition-property: clip;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
h3:hover ~ ul,
h3:active ~ ul,
ul:hover {
  clip: rect(auto, auto, 10rem, auto);
}
<h3>Hover here</h3>
<ul>
  <li>This list</li>
  <li>is clipped.</li>
  <li>A clip transition</li>
  <li>will show it</li>
</ul>
<p>
  Some text...
</p>
P粉242741921

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">

#menu #list {
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
    background: #d5d5d5;
}

#menu:hover #list {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}
<div id="menu">
    <a>hover me</a>
    <ul id="list">
        <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal