javascript - 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

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