CSS过渡可调节高度答案

【问题标题】：CSS transitions adjustable heightCSS过渡可调节高度
【发布时间】：2012-09-18 03:08:03
【问题描述】：

我发现了这个How can I transition height: 0; to height: auto; using CSS?，我一直在尝试使用这种方法来更改按钮 onclick 上 div 的高度，但由于某种原因它对我不起作用。抱歉，如果有很多不必要的信息。

jQuery

function playSound(soundfile){
      document.getElementById("dummy").innerHTML = 
      "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}

   $('button').bind('click', function(e) {
         e.preventDefault();

   $('.taller').toggleClass('animated');
   });

HTML

  <div id="container">
     <span id="dummy"></span>
     <button onclick="playSound('sound/button-30.wav','sound/button30.mp3');">PlaySound</button>                         
     <div class="taller">I SHOULD BECOME TALLER</div>
  </div>

CSS

#container{
background-color:lightblue;
width:960px;
height:550px;
}

.taller{
overflow:hidden;
background:#000;
color:#fff;
width:80px;
max-height:15px;
-webkit-transition: max-height .5s linear;
-moz-transition: max-height .5s linear;
transition: max-height .5s linear;
}

.animated{
max-height:100px;
}

【问题讨论】：

标签： jquery css button html transitions

【解决方案1】：

我将您的代码放入 jsfiddle 并对其进行了测试。它工作得很好；我没有对它做任何事情。你可以在这里看到你的代码http://jsfiddle.net/WY7gM/

【讨论】：

是的，这就是我想要的，但由于某种原因，它在 Aptana Studio 或我的浏览器中不起作用。
您知道为什么会发生这种情况吗？它在 jsfiddle 中运行良好。
如果您在 firefox 或 chrome 中打开调试器，请查看控制台以查看脚本的任何其他部分是否有任何错误。可能是，代码运行良好，但由于错误而无法实现。
我能想到的唯一另一件事是您不止一次使用您的 id，而您期望使用的是第二个（或第三个）（getElementById 只返回第一次出现）。除此之外，如果没有更多上下文或我自己调试，我不知道。

【解决方案2】：

这就是你要找的吗？

Live Demo

将其更改为高度而不是最大高度，它工作正常。在切换时它会增长/缩小。你的问题有点含糊，所以我不确定这是否是你想要的。另外，为什么不把播放声音功能放在点击绑定中？

【讨论】：

您对播放声音功能的权利。我想我的问题更多是关于为什么当我从 Aptana 打开源文件时它在我的浏览器中不起作用。