Javascript css转换垂直大小不工作

Javascript css transition for vertical size does not work

本文关键字：工作 垂直 css 转换 Javascript      更新时间：2023-09-26

我有一个名为" frame "的元素。我有一个与代码链接的按钮' onlclick '。这个想法是应用高度降低过渡到这个"框架"。

这段代码产生了一个简单的框架隐藏，没有过渡。

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

(最后一行可以应用，也可以不应用，得到相同的结果。)

我可以增加或减少高度，但在这两种情况下，高度都是立即应用的。

现在是令人惊讶的行为....转换工作得很好!!我在样式chrome调试器窗口中编写任何高度，我看到过渡工作!!

转换不能在代码级别工作的原因是什么?

我有另一个类似的宽度增加过渡代码，它工作得很好。

任何想法?由于

尝试在setTimeout回调中设置您的高度:

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

setTimeout与0延迟本质上指示浏览器等待，直到当前UI线程完成之前执行提供的回调。有关setTimeout与0延迟的更多信息，请查看此线程。

相关文章：