Javascript CSS转换取决于样式指定的顺序

为了使包含文本的容器在添加新文本时逐渐扩展，我使用了css

transition

property。准确地说，我固定当前宽度，添加文本，然后释放宽度。JS代码如下：

footer.style['max-width'] = footer.offsetWidth + 'px'
footer.innerHTML += ' additional text'
footer.style['max-width'] = '500px'

使用此css作为

页脚

：

overflow: hidden;
text-overflow: clip;
white-space: nowrap;

这不管用。为了找到解决方法，我添加了另一行代码：

footer.style['height'] = footer.offsetHeight + 'px'

现在，将这一行放在

max width

的赋值之前（在代码段的开头），它就不起作用了。但是把它放在那条线之后（让它成为第二条线）就行了。问题是为什么？使用过渡的正确方法是什么？（但主要原因是什么？）

---

Fiddle在firefox 40.0和chrome 39.0中测试：

问题可能是您的

footer.style['max-width']

分配都发生在同一个同步操作中。浏览器可能会完全忽略中间值

如果将操作分为两部分，则可以解决此问题：

设置初始化宽度并

使用

setTimeout

触发实际分配

试着这样做：

footer.style['max-width'] = footer.offsetWidth + 'px'
window.setTimeout(function() {
  footer.innerHTML += ' additional text'
  footer.style['max-width'] = '500px'
}, 0)

---

你能解释一下“它不起作用”吗？（使用IE11，一切似乎都能正常工作）你说得对。在其他浏览器中，看到的是一行立即获得全宽。尝试将“最大宽度”初始化为某个合理值（例如offsetWidth…），并在稍后的周期中修改文本和宽度，可以作为事件处理程序（例如，单击按钮），也可以使用setTimeout。FF/Chrome可能会“忽略”最大宽度的中间值，因为它在同一JS周期内。

max width

正被初始化为

offsetWidth

，这是我发布的代码的第一行。所有这些东西都在

onclick

处理程序中，我只是在这里减少了它，以发布更少的js。我现在明白了什么意思，

setTimeout（0）

确实有帮助。非常感谢。重写你的评论作为对我的回答。