css transitions not firing smoothly

Question

code: js:

function showservices() {
    document.getElementById("market").style.transition="height 3s ease-in";
    document.getElementById("market").style.height="0px";
    document.getElementById("market_").style.transition="height 3s ease-in";
    document.getElementById("market_").style.height="auto";
}

html: (I call the function from chrome console, and also tried with a buton)

<div id="market">Hello</div>
<div id="market_">Good Bye</div>

It goes on but not smoothly, transition not working. Can anyone help me? Thanks!

Answer 1

You cannot animate to a height of auto. You have to calculate that height, perhaps by placing it offscreen and using clientHeight or the appropriate measurement, save it to a variable, and toggle it using that variable

var market = document.getElementById("market"),
    market_ = document.getElementById("market_"),
    // Save the heights
    marketHeight = market.clientHeight,
    market_Height = market_.clientHeight;

// Remove the height of market_
market_.style.height = "0px";

function showservices() {
    market.style.transition="height 3s ease-in";
    market_.style.transition="height 3s ease-in";
    market.style.height = "0px";
    // In essence animates to the "auto" value, but is an actual pixel value
    market_.style.height = market_Height + "px";
}
showservices();

Demo

Note: If the height of the toggled variable varies on widow resize then you will have to calculate its height each time, likely within a window.onresize function