Comment puis-je atteindre la hauteur de transition: 0; hauteur: auto; utilisation CSS

90

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

83

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>

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>

73

/* final display */  #menu #list {      margin: .5em 1em;      padding: 1em;  }    /* hide */  #menu:not(:hover) #list {      font-size: 0;      margin: 0;      opacity: 0;      padding: 0;      /* fade out, then shrink */      transition: opacity .25s,                  font-size .5s .25s,                  margin .5s .25s,                  padding .5s .25s;  }    /* reveal */  #menu:hover #list {      /* unshrink, then fade in */      transition: font-size .25s,                  margin .25s,                  padding .25s,                  opacity .5s .25s;  }

<div id="menu">      <b>hover me</b>      <ul id="list">          <li>item</li>          <li>item</li>          <li>item</li>          <li>item</li>          <li>item</li>      </ul>  </div>    <p>Another paragraph...</p>

66

$(function () {   $(".toggler").click(function () {     $(this).next().toggleClass("collapsed");     $(this).toggleClass("toggled"); // this just rotates the expander arrow   }); });

.collapsible-wrapper {   display: flex;   overflow: hidden; } .collapsible-wrapper:after {   content: '';   height: 50px;   transition: height 0.3s linear, max-height 0s 0.3s linear;   max-height: 0px; } .collapsible {   transition: margin-bottom 0.3s cubic-bezier(0, 0, 0, 1);   margin-bottom: 0;   max-height: 1000000px; } .collapsible-wrapper.collapsed > .collapsible {   margin-bottom: -2000px;   transition: margin-bottom 0.3s cubic-bezier(1, 0, 1, 1),               visibility 0s 0.3s, max-height 0s 0.3s;   visibility: hidden;   max-height: 0; } .collapsible-wrapper.collapsed:after {   height: 0;   transition: height 0.3s linear;   max-height: 50px; }  /* END of the collapsible implementation; the stuff below    is just styling for this demo */  #container {   display: flex;   align-items: flex-start;   max-width: 1000px;   margin: 0 auto; }     .menu {   border: 1px solid #ccc;   box-shadow: 0 1px 3px rgba(0,0,0,0.5);   margin: 20px;     }  .menu-item {   display: block;   background: linear-gradient(to bottom, #fff 0%,#eee 100%);   margin: 0;   padding: 1em;   line-height: 1.3; } .collapsible .menu-item {   border-left: 2px solid #888;   border-right: 2px solid #888;   background: linear-gradient(to bottom, #eee 0%,#ddd 100%); } .menu-item.toggler {   background: linear-gradient(to bottom, #aaa 0%,#888 100%);   color: white;   cursor: pointer; } .menu-item.toggler:before {   content: '';   display: block;   border-left: 8px solid white;   border-top: 8px solid transparent;   border-bottom: 8px solid transparent;   width: 0;   height: 0;   float: right;   transition: transform 0.3s ease-out; } .menu-item.toggler.toggled:before {   transform: rotate(90deg); }  body { font-family: sans-serif; font-size: 14px; }  *, *:after {   box-sizing: border-box; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="container">   <div class="menu">     <div class="menu-item">Something involving a holodeck</div>     <div class="menu-item">Send an away team</div>     <div class="menu-item toggler">Advanced solutions</div>     <div class="collapsible-wrapper collapsed">       <div class="collapsible">         <div class="menu-item">Separate saucer</div>         <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>         <div class="menu-item">Ask Worf</div>         <div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>         <div class="menu-item">Ask Q for help</div>       </div>     </div>     <div class="menu-item">Sweet-talk the alien aggressor</div>     <div class="menu-item">Re-route power from auxiliary systems</div>   </div>    <div class="menu">     <div class="menu-item">Something involving a holodeck</div>     <div class="menu-item">Send an away team</div>     <div class="menu-item toggler">Advanced solutions</div>     <div class="collapsible-wrapper collapsed">       <div class="collapsible">         <div class="menu-item">Separate saucer</div>         <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>       </div>     </div>     <div class="menu-item">Sweet-talk the alien aggressor</div>     <div class="menu-item">Re-route power from auxiliary systems</div>   </div>    <div class="menu">     <div class="menu-item">Something involving a holodeck</div>     <div class="menu-item">Send an away team</div>     <div class="menu-item toggler">Advanced solutions</div>     <div class="collapsible-wrapper collapsed">       <div class="collapsible">         <div class="menu-item">Separate saucer</div>         <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>         <div class="menu-item">Ask Worf</div>         <div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>         <div class="menu-item">Ask Q for help</div>         <div class="menu-item">Separate saucer</div>         <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>         <div class="menu-item">Ask Worf</div>         <div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>         <div class="menu-item">Ask Q for help</div>       </div>     </div>     <div class="menu-item">Sweet-talk the alien aggressor</div>     <div class="menu-item">Re-route power from auxiliary systems</div>   </div>  </div>