添加CSS3过渡展开/折叠

写成[这里]（http://stackoverflow.com/a/3512194/1517380）这是不可能的atm（因为你想有一个动画的权利？）除了[这里描述的昂贵的解决方法]（http://stackoverflow.com/questions/3149419/can-you-use-css3-to-transition-from-height0-to-the-variable-height-of-content ） – r3bel 2012-07-17 01:18:08

我编辑了你的jsfiddle，并为动态高度添加了一个“解决方法”，但是每次当下拉高度随着javascript改变时，你必须得到下拉的高度：[jsfiddle]（http://jsfiddle.net/Bq6eK/217 /）。我不能保证你能正确地使用所有的浏览器：D – r3bel 2012-07-17 23:55:52

http://jsfiddle.net/Bq6eK/215/

我不修改代码的这个解决方案，我写我的拥有。我的解决方案并不完全符合你的要求，但也许你可以用现有的知识来建立它。我也评论了代码，所以你知道我正在做什么改变。

作为“避免在JavaScript中设置高度”的解决方案，我刚刚在JS函数中为'toggleHeight'创建了'maxHeight'参数。现在可以在HTML中为每个div的可扩展类设置它。

我会先说这个，我对前端语言没有超级经验，并且有一个问题，在动画开始之前，我需要先点击两次“显示/隐藏”按钮。我怀疑这是一个焦点问题。

我的解决方案的另一个问题是，如果不按下显示/隐藏按钮，只需单击div并向下拖动，就可以真正弄清楚隐藏文本是什么，您可以突出显示不可见的文本并粘贴它到可见的空间。

我对我所做的最后一步的建议是使显示/隐藏按钮动态变化。我想你可以弄清楚如何用你已经知道的关于用JS显示和隐藏文本的知识。

来源

2012-07-17 08:48:27 ayang9

我做了两个小修改：http://jsfiddle.net/Bq6eK/215/。 'onclick =“...”'应该返回false，并且应该直接为元素设置高度，而不是在CSS中。否则，必须点击两次以打开框，因为'elem.style'只包含直接为元素设置的样式，而不包含有效样式。 – kay 2012-07-17 21:20:29

谢谢！我现在知道了。 – ayang9 2012-07-17 21:34:42

这是一个根本不使用JS的解决方案。它使用checkboxes代替。

您可以通过添加这对你的CSS隐藏复选框：

.container input{ 
    display: none; 
}

，然后添加一些造型，使它看起来像一个button。

Here's the source code that I modded.

来源

2012-07-20 19:30:50 ayang9

该解决方案不会根据文本数量应用高度。在CSS中，你必须决定被检查的div的高度：'.ac-container input：checked〜article.ac-small { \t height：140px; “我需要一个解决方案，根据内容应用高度。 – Felix 2012-08-06 22:40:21

OMG，我试图找到一个简单的解决方案，这几个小时。我知道代码很简单，但没有人提供给我我想要的。最后，我们开始研究一些示例代码，并简化了任何人都可以使用的JQuery。简单的JavaScript和CSS和HTML。为了动画的工作，你必须设置高度和宽度或动画不会工作。发现困难的方式。

<script> 
     function dostuff() { 
      if (document.getElementById('MyBox').style.height == "0px") { 

       document.getElementById('MyBox').setAttribute("style", "background-color: #45CEE0; height: 200px; width: 200px; transition: all 2s ease;"); 
      } 
      else { 
       document.getElementById('MyBox').setAttribute("style", "background-color: #45CEE0; height: 0px; width: 0px; transition: all 2s ease;"); 
      } 
     } 
    </script> 
    <div id="MyBox" style="height: 0px; width: 0px;"> 
    </div> 

    <input type="button" id="buttontest" onclick="dostuff()" value="Click Me">

来源

2018-03-06 22:55:30 Deathstalker

添加CSS3过渡展开/折叠

回答

相关问题