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 Transitions 。 我基本上設置了兩個CSS3類定義，並使用jQuery的.toggleClass()函數在兩者之間進行更改。