SetTimeout并显示none以逐步阻止：出了什么问题？

Question

http://liveweave.com/UWAc2i

你好，

在globalTable获得最终大小

之前显示嵌套表

如果有人花点时间去看，那就太好了。

#green {
display: none;
height: 0;
background:#4CFF00;
}
#green.appear {
height:55px;
-webkit-transition: all 8s ease-out;
-moz-transition: all 8s ease-out;
-o-transition: all 8s ease-out;
transition: all 8s ease-out;
}

功能：

function OpenVert() {
var greenTable = document.getElementById('green');
greenTable.style.display = 'block';
document.getElementById("nextVert").style.display = "none";
setTimeout(function () { greenTable.className = 'appear' }, 0);
}

HTML代码：

<table width="50%">
<tr><td>globalTable</td></tr>
<tr><td id="nextVert">
<input type="button" id="nextvert" value="Next Step" onclick="OpenVert()" />
</td></tr>
<tr>
<table id="green">
<tr><td>Nested green table</td></tr>
</table>
</tr>
</table>