CSS3 Javascript触发转换动画

Question

我有一个DIV类设置如下：

div.map_view{
height: 420px;
transition: height 2s;
-moz-transition: height 2s; /* Firefox 4 */
-webkit-transition: height 2s; /* Safari and Chrome */
-o-transition: height 2s; /* Opera */
}

目的是当我改变这个DIV的高度时，它会动画滚动（在这种情况下向上）。当我在我的脚本中调用此函数时： document.getElementById('map_view').style.height = '0px';，它会立即消失（不动画）。但是，如果我对此进行注释并在我的JS调试器中调用完全相同的行，则动画可以正常工作。

这是为什么？我错过了什么导致它在我的脚本中什么都不做？

Answer 1

我知道我已经通过使用jquery削减了几个角落，但这就是我得到的：

http://jsfiddle.net/qZ6J4/7/

看看那个。

Answer 2

我实际上在这里找到了一个有用的教程：CSS3 Transitions in JavaScript。我基本上设置了我的两个CSS3类定义，并使用jQuery的.toggleClass()函数在两者之间进行更改。