CSS transition not working for percentage height?

Solution 1:

The (pure CSS) solution so far

If you leave height:auto; and use fixed values of max-height you can simulate a transition:

.details-expanded {
    max-height: 300px; /* try to guess a max-height for your content */
}

.details-collapsed {
    height: auto;
    max-height: 0;
    transition: max-height 500ms linear; /* pick a proportional duration */
}

Pay attention to the transition duration and max-height when the element is expanded. Play with the values until you get the wanted behavior.

This way you can get a transition between two defined values (in the above example, from 0 to 300) while the height property will just "follow" the max-height transition and grow until it gets the content's size.

Demos

DEMO 1 - a working example of this solution

DEMO 2 - just demonstration of what is going on in DEMO 1

Observations

For now transitions are implemented only between predefined values and I supposed it is because the engine cannot guess the initial or final value in some cases. What if you have a height transition which its final value is 50% but transition itself affects the parent's height somehow?! It would probably require several reflow calculations on each frame causing performance issues.

Like fabb said, the spec for CSS transitions determines that percentage values should be supported, so it might be just a matter of time until engines decides on which cases they're going to support transitions using dynamically valued points. Still, I'm not sure about what could be considered the correct behavior for auto values thought.

Solution 2:

According to the W3C Spec on CSS3 Transitions, both length and percentage should be allowed for a transition on the property height. So I guess it's just a matter of time until providing a percentage is supported in browsers.

Solution 3:

i had the same issue. Transition worked fine when "collapsing", but appeared with no transition (like being "switched on") on "expanding", when "display:none" was set before.

I accidentally came to a working solution while debugging: simply querying the "offsetHeight" seems to force an internal re-render of the element.

something like this:

    showElement = function(){
       ...
       oEl.style.display = "block";
       var xDump = oEl.offsetHeight;
       oEl.className = "show";
    }

xDump is never used, but having it, made the differnce.

Solution 4:

It is the change from display:none to display:block that is stopping the transition. Try setting the collapsed style to display:block; height:0; overflow:hidden;

Note: a expanded height of auto will also stop the transition. If there is no height set on the containing block then a height of 100% is equal to a height of auto.