css部分
*{margin:0;padding:0;}
.box{position:relative;transition:top 2s linear;height:200px;background-color:#38f;color:#fff;}

html部分
<div id="box" class="box">Hello World</div>
<div id="kick">點(diǎn)我</div>


js部分
var oBox=document.getElementById('box')
oBox.style.top=-1*oBox.offsetHeight+'px'
oBox.style.top=0
//setTimeout(function(){
//    oBox.style.top=0
//},0)

在線代碼預(yù)覽http://jsbin.com/fabarojudu/e...
我的問題是,頁面載入時,先給box元素一個oBox.style.top=-1*oBox.offsetHeight+'px'
然后立即歸零oBox.style.top=0
這樣依靠css的transition:top 2s linear;理論上可以制造一個自上到下的滑動效果.
可實(shí)際情況是,只有給oBox.style.top=0加一層setTimeout,才能觸發(fā)動畫.
那么除了setTimeout,還有其他什么方法可以觸發(fā)動畫嗎?謝謝