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

我其實在這裏找到了一個有用的教程：CSS3 Transitions in JavaScript。我基本上設置了我的兩個CSS3類定義，並使用jQuery的.toggleClass()函數在兩者之間進行切換。

Answer 2

我知道我剪了一對夫妻帶着這個角落通過使用jQuery但這裏是我的了：

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

看看那個。