Javascript 设置超时并显示无以逐步阻止：什么'；怎么了？

你好,

嵌套表在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>

全球的
嵌套绿色表格

通常情况下，

transition

是您将始终放置在对象上的属性。它的意思不是“立即执行转换”，而是“如果指定属性有任何更改，请将其作为转换执行”。我会进一步帮助你，但你只使用了

-webkit-

，我懒得下载Chrome。不要只使用一个带前缀的属性。从一开始就要养成正确处理CSS3属性的习惯，即使是在开发过程中，这样如果你需要有人测试你的代码，那么如果他们使用Firefox/IE/或其他任何东西，他们就不会出错。@Ariane是的，我忘记了前缀，对不起。我想我在这里不受欢迎。。。谢谢你的关注。我将很高兴结束这个项目，虽然我将得到的唯一好处可能是我自己的满意。回到代码：-）不幸的是，FF和IE9不能像Chrome那样反应。因此，我在Chrome上观察到的行为可能是我糟糕代码的副作用。（继续下一条评论）…第一次出现在没有背景色的绿色表格单元格上。第二/将绿色背景颜色平滑增长至其最终值。我想要（但可能不可能）的是嵌套表全局平滑地显示其所有属性。自从我更改了这个queston的标题后，我想（我错了吗？）现在它与SetTimeout方法无关。但很明显，我误解了代码。这是你想要的吗？可能有一种“更干净”的方法，但如果我理解得很好，这看起来会起作用。哦，是的！我相信Jquery及其插件Jquery UI有一种更简单的方法来实现这一点。可能还有其他库也有类似的功能。也许还有一个比我做的更简单的纯JS解决方案。类似的东西通常被称为“手风琴”/“手风琴菜单”。查一查！