垂直大小的Javascript css转换不起作用

Question

我有一个名为'frame'的元素。 我有一个代码链接'onlclik'的按钮。 这个想法是应用高度减少过渡到这个'框架'。

这段代码导致一个简单的框架隐藏，没有过渡。

frame.style.cssText+="transition: height 1500ms; -webkit-transition: height 1500ms;";
frame.style.height = "0px";
//frame.style.display = "block";        

（可以应用或不应用最后一行，得到相同的结果。）

我可以增加或减少高度，但在这两种情况下，高度都会立即应用。没有过渡......

现在令人惊讶的行为......过渡工作正常！ 我在样式chrome调试器窗口写任何高度，我看到转换工作!!

因为转换在代码级别不起作用，原因是什么？

我有另一个类似的宽度增加转换代码，它工作正常。

有什么想法吗？感谢

Answer 1

尝试在setTimeout回调中设置身高：

frame.style.cssText+="transition: height 1500ms; -webkit-transition: height 1500ms;";
setTimeout(function() { frame.style.height = "0px"; }, 0);

具有setTimeout延迟的

0实质上指示浏览器在执行提供的回调之前等待当前UI线程完成。有关setTimeout延迟0的原因有用的详细信息，请查看this thread。