javascript - css 过渡不顺利发射

Question

代码: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:(我从 chrome 控制台调用函数，也尝试使用按钮)

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

它继续但不顺利，过渡不起作用。谁能帮我？谢谢!

Answer 1

您不能为 auto 的高度设置动画。您必须计算该高度，也许可以将其放置在屏幕外并使用 clientHeight 或适当的测量值，将其保存到一个变量中，然后使用该变量切换它

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

注意:如果切换变量的高度随 widow 调整大小而变化，那么您每次都必须计算它的高度，可能在 window.onresize 函数中