CSS 转换取决于样式分配的顺序

Question

为了尝试让文本容器在添加新文本后逐渐扩展，我使用了 css transition 属性。准确地说，我固定当前宽度，添加文本，然后释放宽度。 JS代码如下：

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

用这个 css 为 footer:

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

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

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

现在，将此行放在 max-width 的赋值之前（因此在代码段的开头），它不起作用。但是将它放在该行之后（使其成为第二行）——确实如此。问题是为什么？处理过渡的正确方法是什么？（但主要是，为什么？）

Fiddle 在 firefox 40.0 和 chrome 39.0 中测试：http://jsfiddle.net/53dbm6vz/

Answer 1

问题很可能是您的两个 footer.style['max-width'] 赋值发生在同一个同步操作中。浏览器可能会完全忽略中间值。

如果将操作拆分为 2 个部分，则可以解决：

设置初始化宽度并...
使用 setTimeout 触发实际赋值。

这样试试：

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

CSS 转换取决于样式分配的顺序

CSS transition depends on order of style assignments

javascript

css

css-transitions