How To Animated Ul Height In Css

Question

This is a CSS-merely solution with the following properties:

At that place is no delay at the beginning, and the transition doesn't end early. In both directions (expanding and collapsing), if you specify a transition duration of 300ms in your CSS, so the transition takes 300ms, period.
It's transitioning the actual meridian (different transform: scaleY(0)), so information technology does the correct thing if in that location's content afterward the collapsible element.
While (like in other solutions) in that location are magic numbers (like "pick a length that is higher than your box is e'er going to be"), it's not fatal if your assumption ends up existence wrong. The transition may non look amazing in that example, only earlier and after the transition, this is not a problem: In the expanded (height: machine) state, the whole content ever has the correct height (dissimilar e.thousand. if you choice a max-height that turns out to be also depression). And in the collapsed country, the height is zero as information technology should.

Demo

Here's a demo with three collapsible elements, all of different heights, that all use the same CSS. You might want to click "full page" later on clicking "run snippet". Note that the JavaScript just toggles the collapsed CSS form, in that location's no measuring involved. (You could do this exact demo without any JavaScript at all past using a checkbox or :target). Also annotation that the part of the CSS that's responsible for the transition is pretty brusque, and the HTML just requires a unmarried additional wrapper chemical element.

            $(function () {   $(".toggler").click(function () {     $(this).next().toggleClass("complanate");     $(this).toggleClass("toggled"); // this merely rotates the expander pointer   }); });

            .collapsible-wrapper {   display: flex;   overflow: hidden; } .collapsible-wrapper:subsequently {   content: '';   height: 50px;   transition: peak 0.3s linear, max-pinnacle 0s 0.3s linear;   max-acme: 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, i, i),               visibility 0s 0.3s, max-acme 0s 0.3s;   visibility: hidden;   max-height: 0; } .collapsible-wrapper.collapsed:after {   summit: 0;   transition: meridian 0.3s linear;   max-height: 50px; }  /* END of the collapsible implementation; the stuff below    is merely styling for this demo */  #container {   display: flex;   align-items: flex-start;   max-width: 1000px;   margin: 0 auto; }     .carte du jour {   border: 1px solid #ccc;   box-shadow: 0 1px 3px rgba(0,0,0,0.v);   margin: 20px;     }  .bill of fare-item {   display: block;   background: linear-gradient(to bottom, #fff 0%,#eee 100%);   margin: 0;   padding: 1em;   line-height: 1.three; } .collapsible .menu-item {   border-left: 2px solid #888;   edge-right: 2px solid #888;   groundwork: 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-pinnacle: 8px solid transparent;   border-lesser: 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 unit: sans-serif; font-size: 14px; }  *, *:after {   box-sizing: border-box; }

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/two.1.1/jquery.min.js"></script>  <div id="container">   <div form="menu">     <div class="menu-detail">Something involving a holodeck</div>     <div class="menu-item">Send an away squad</div>     <div course="menu-detail toggler">Advanced solutions</div>     <div class="collapsible-wrapper collapsed">       <div grade="collapsible">         <div form="menu-item">Divide saucer</div>         <div class="menu-item">Send an abroad team that includes the captain (despite Riker'south protestation)</div>         <div class="menu-item">Ask Worf</div>         <div class="carte-item">Something involving Wesley, the 19th century, and a holodeck</div>         <div class="bill of fare-item">Enquire Q for assistance</div>       </div>     </div>     <div course="menu-item">Sweet-talk the alien aggressor</div>     <div course="menu-detail">Re-road power from auxiliary systems</div>   </div>    <div grade="menu">     <div class="carte-particular">Something involving a holodeck</div>     <div class="menu-item">Send an abroad squad</div>     <div class="carte-item toggler">Advanced solutions</div>     <div class="collapsible-wrapper complanate">       <div class="collapsible">         <div class="menu-item">Separate saucer</div>         <div course="menu-item">Ship an abroad team that includes the captain (despite Riker'due south protestation)</div>       </div>     </div>     <div class="bill of fare-item">Sweetness-talk the alien aggressor</div>     <div course="menu-item">Re-route power from auxiliary systems</div>   </div>    <div class="menu">     <div course="menu-item">Something involving a holodeck</div>     <div class="card-item">Ship an away squad</div>     <div form="bill of fare-item toggler">Avant-garde solutions</div>     <div class="collapsible-wrapper collapsed">       <div class="collapsible">         <div course="carte-item">Split saucer</div>         <div grade="menu-item">Ship an away team that includes the captain (despite Riker's protestation)</div>         <div grade="carte du jour-item">Ask Worf</div>         <div class="carte du jour-item">Something involving Wesley, the 19th century, and a holodeck</div>         <div class="menu-item">Ask Q for assist</div>         <div class="menu-particular">Separate saucer</div>         <div course="menu-item">Transport an abroad team that includes the captain (despite Riker's protest)</div>         <div class="menu-item">Ask Worf</div>         <div class="bill of fare-item">Something involving Wesley, the 19th century, and a holodeck</div>         <div class="menu-item">Enquire Q for assistance</div>       </div>     </div>     <div grade="menu-detail">Sweet-talk the alien assailant</div>     <div form="menu-item">Re-road power from auxiliary systems</div>   </div>  </div>

How does it piece of work?

There are in fact two transitions involved in making this happen. One of them transitions the margin-lesser from 0px (in the expanded state) to -2000px in the collapsed state (similar to this respond). The 2000 here is the first magic number, information technology's based on the assumption that your box won't exist higher than this (2000 pixels seems like a reasonable choice).

Using the margin-bottom transition alone by itself has two issues:

If you really have a box that's higher than 2000 pixels, then a margin-bottom: -2000px won't hide everything -- there'll be visible stuff fifty-fifty in the collapsed case. This is a minor set that nosotros'll do later.
If the actual box is, say, thou pixels loftier, and your transition is 300ms long, and then the visible transition is already over after about 150ms (or, in the opposite direction, starts 150ms late).

Fixing this second event is where the second transition comes in, and this transition conceptually targets the wrapper's minimum height ("conceptually" because we're not really using the min-tiptop property for this; more on that after).

Here'south an animation that shows how combining the bottom margin transition with the minimum height transition, both of equal duration, gives us a combined transition from total height to zero height that has the same elapsing.

animation as described above

The left bar shows how the negative bottom margin pushes the bottom upwards, reducing the visible elevation. The middle bar shows how the minimum height ensures that in the collapsing case, the transition doesn't end early on, and in the expanding case, the transition doesn't start late. The right bar shows how the combination of the ii causes the box to transition from total summit to zero meridian in the correct amount of time.

For my demo I've settled on 50px every bit the upper minimum height value. This is the 2nd magic number, and it should exist lower than the box' summit would e'er be. 50px seems reasonable likewise; information technology seems unlikely that you'd very often want to make an chemical element collapsible that isn't even 50 pixels high in the commencement identify.

As you can see in the animation, the resulting transition is continuous, merely it is not differentiable -- at the moment when the minimum superlative is equal to the full elevation adapted by the bottom margin, there is a sudden change in speed. This is very noticeable in the blitheness because information technology uses a linear timing function for both transitions, and because the whole transition is very slow. In the actual case (my demo at the top), the transition merely takes 300ms, and the bottom margin transition is not linear. I've played around with a lot of dissimilar timing functions for both transitions, and the ones I ended upwardly with felt similar they worked best for the widest variety of cases.

2 problems remain to ready:

the point from above, where boxes of more than 2000 pixels height aren't completely hidden in the collapsed state,
and the reverse trouble, where in the non-hidden case, boxes of less than fifty pixels height are likewise high fifty-fifty when the transition isn't running, because the minimum superlative keeps them at fifty pixels.

We solve the first problem by giving the container element a max-height: 0 in the collapsed instance, with a 0s 0.3s transition. This ways that it'southward non really a transition, but the max-height is applied with a filibuster; information technology just applies in one case the transition is over. For this to work correctly, we likewise demand to pick a numerical max-height for the contrary, non-complanate, state. Just unlike in the 2000px case, where picking also large of a number affects the quality of the transition, in this case, it really doesn't matter. So we can just option a number that is then loftier that nosotros know that no acme will ever come close to this. I picked a million pixels. If you feel you may need to support content of a height of more than than a million pixels, then ane) I'm sorry, and 2) just add a couple of zeros.

The second problem is the reason why we're not actually using min-peak for the minimum pinnacle transition. Instead, there is an ::after pseudo-element in the container with a height that transitions from 50px to zero. This has the same result equally a min-peak: Information technology won't let the container shrink below whatever meridian the pseudo-element currently has. But considering we're using peak, not min-height, we tin now use max-height (once again applied with a delay) to set the pseudo-element's actual elevation to zero in one case the transition is over, ensuring that at least outside the transition, even small elements take the correct peak. Considering min-height is stronger than max-peak, this wouldn't work if nosotros used the container's min-tiptop instead of the pseudo-chemical element'due south height. Merely like the max-top in the previous paragraph, this max-height also needs a value for the opposite end of the transition. Merely in this example we can just pick the 50px.

Tested in Chrome (Win, Mac, Android, iOS), Firefox (Win, Mac, Android), Edge, IE11 (except for a flexbox layout issue with my demo that I didn't bother debugging), and Safari (Mac, iOS). Speaking of flexbox, it should exist possible to brand this piece of work without using whatsoever flexbox; in fact I remember you lot could make most everything piece of work in IE7 – except for the fact that y'all won't accept CSS transitions, making it a rather pointless exercise.