Question

在使用css transition属性添加新文本时，尝试使带有文本的容器逐渐扩展。确切地说，我修复当前宽度，添加文本然后释放宽度。 JS代码如下：

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

使用footer的这个css：

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

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

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

现在，在分配max-width之前放置此行（因此在代码段的开头），它不起作用。但是把它放在那条线之后（使它成为第二条线） - 确实如此。问题是为什么？什么是使用转换的正确方法？（但主要是，为什么？）

小提琴在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转换取决于样式分配的顺序

1 个答案: