CSS过渡未触发

Question

我正在创建一个DOM元素（一个div），将其添加到DOM，然后在javascript中快速点击即可更改其宽度。从理论上讲，这应该触发CSS3转换，但是结果是从A到B直接转换，而两者之间没有转换。

如果我通过单独的测试点击事件来更改宽度，则一切都会按预期进行。

这是我的JS和CSS：

JS（jQuery）：

var div = $('<div />').addClass('trans').css('width', '20px');
$('#container').append(div);
div.css('width', '200px');

CSS（目前仅使用mozilla）：

.trans {
    -moz-transition-property: all;
    -moz-transition-duration: 5s;
    height: 20px;
    background-color: cyan;
}

我是在这里搞砸了吗，还是“一键通”不应该做的事情？

非常感谢所有帮助。

Answer 1

一种不依赖setTimeout的更干净的方法是在设置之前读取有问题的css属性：

var div = $('<div />').addClass('trans');
$('#container').append(div);
div.css('width');//add this line
div.css('width', '200px');

正如Lucero在下面的评论中所解释的那样，这样做必须强制浏览器计算实际值，而不是“自动”，“继承”或类似值。没有实际值，浏览器将不会知道新值是前一个值的更改。