為什么ele.style.top放在setTimeout里，才會(huì)有動(dòng)畫(huà)效果？

style部分

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

html部分

<div id="ele" class="aa">動(dòng)畫(huà)文字</div>

js部分

var ele=document.getElementById('ele')
ele.onclick=function(){
    ele.style.top=0
//ele.style.top=100+'px'如果這一行不放在setTimeout里，就不會(huì)出現(xiàn)top從0到100的動(dòng)畫(huà)
setTimeout(function(){
    ele.style.top=100+'px'
},0)
}

在線預(yù)覽地址
http://jsbin.com/pucedelowa/e...

現(xiàn)在就有一個(gè)疑惑，為什么只有把ele.style.top=100+'px'放在seTimeout里，點(diǎn)擊文字后才會(huì)有transition的動(dòng)畫(huà)效果呢？
另外有沒(méi)有其他函數(shù)，可以達(dá)到和setTimeout一樣的效果呢？