Animating Max-height With CSS Transitions

Answer :

Fix delay solution:

Put cubic-bezier(0, 1, 0, 1) transition function for element.

scss

.text {   overflow: hidden;   max-height: 0;   transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);    &.full {     max-height: 1000px;     transition: max-height 1s ease-in-out;   } } 

css

.text {   overflow: hidden;   max-height: 0;   transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); }  .text.full {   max-height: 1000px;   transition: max-height 1s ease-in-out; } 

This is an old question but I just worked out a way to do it and wanted to stick it somewhere so I know where to find it should I need it again :o)

So I needed an accordion with clickable "sectionHeading" divs that reveal/hide corresponding "sectionContent" divs. The section content divs have variable heights, which creates a problem as you can't animate height to 100%. I've seen other answers suggesting animating max-height instead but this means sometimes you get delays when the max-height you use is larger than the actual height.

The idea is to use jQuery on load to find and explicitly set the heights of the "sectionContent" divs. Then add a css class 'noHeight' to each a click handler to toggle it:

$(document).ready(function() {     $('.sectionContent').each(function() {         var h = $(this).height();         $(this).height(h).addClass('noHeight');     });     $('.sectionHeader').click(function() {         $(this).next('.sectionContent').toggleClass('noHeight');     }); }); 

For completeness, the relevant css classes:

.sectionContent {     overflow: hidden;     -webkit-transition: all 0.3s ease-in;     -moz-transition: all 0.3s ease-in;     -o-transition: all 0.3s ease-in;     transition: all 0.3s ease-in; } .noHeight {         height: 0px !important; } 

Now the height transitions work without any delays.

In case anyone is reading this, I have not found a solution and went with an expand-only effect (which was achieved by moving the transition style to the expanded class definition)