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控制台调用该函数，并尝试使用buton）

<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

注意：如果切换变量的高度因寡妇调整大小而异，那么您每次都必须计算其高度，可能在window.onresize函数内

css过渡不顺利

1 个答案: