我正在创建一个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;
}
我在这里搞砸了，还是“一击一击”，而不是做事情呢？
所有的帮助是非常感激的。
解决方法
一个不依赖于setTimeout的更清洁的方法是在设置之前读取相关的css属性：
var div = $('<div />').addClass('trans');
$('#container').append(div);
div.css('width');//add this line
div.css('width','200px');
在这里工作：
http://jsfiddle.net/FYPpt/144/
如Lucero下面的评论所述，这样做是必要的，以强制浏览器计算一个实际值而不是“auto”，“inherit”或类似的值。没有实际的价值，浏览器将不会知道新的值是与之前的变化。
