为什么ele.style.top放在setTimeout里，才会有动画效果？

Question

style部分

.aa{position:absolute;transition:top 2s;}

html部分

<div id="ele" class="aa">动画文字</div>

js部分

var ele=document.getElementById('ele')
ele.onclick=function(){
    ele.style.top=0
//ele.style.top=100+'px'如果这一行不放在setTimeout里，就不会出现top从0到100的动画
setTimeout(function(){
    ele.style.top=100+'px'
},0)
}

在线预览地址
http://jsbin.com/pucedelowa/e...

现在就有一个疑惑，为什么只有把ele.style.top=100+'px'放在seTimeout里，点击文字后才会有transition的动画效果呢？
另外有没有其他函数，可以达到和setTimeout一样的效果呢？

Answer 1

ele.style.top=0
ele.style.top=100+'px'

因为同步方法执行完成前，是不会渲染的，最终就是100px，异步方法才可以达到这个效果。