CSS3 Javascript触发过渡动画答案

【问题标题】：CSS3 Javascript trigger transition animationCSS3 Javascript触发过渡动画
【发布时间】：2012-08-03 02:57:47
【问题描述】：

我有一个 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 调试器中调用完全相同的行，动画就会起作用。

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

【问题讨论】：

标签： javascript css css-animations

【解决方案1】：

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

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

看看那个。

【讨论】：

【解决方案2】：

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

【讨论】：