为什么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一样的效果呢？