关于JavaScript单线程的问题

Question

var ele=document.createElement('div');
var body=document.getElementsByTagName('body')[0];
ele.style.cssText='transition:2s;transform:translateX(200px);background:red;width:200px;height:200px';
body.appendChild(ele);为什么这样不会有过渡效果？
setTimeout(function(){
ele.style.cssText='transition: 2s;transform:translateX(200px);background:red;width:200px;height:200px';
},0)  而加个延时器就可以