最大高度上的动画？

Question

我有一个具有特定高度的div，当我切换“折叠”类时，如果div太高，应该缩小到特定的最大高度。 我一直在尝试为这种缩小设置动画，但尚未弄清楚。 我已经在网上查找了它，似乎在元素中添加了以下几行就足够了。

-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;

但是，无论我将它们分配给哪个类，它都没有起作用。 我的位置有jsfiddle 。

有关如何执行此操作的任何想法？ 谢谢！

Answer 1

仅当您要更改的height属性没有解析为auto transition才有效。

我已经更新了您的jsfiddle以反映所需的更改。

Answer 2

下面，我更新了您的示例。 这些是修复程序：

1. 您需要添加一个属性以在transition设置动画。 在您的情况下max-height 。
2. 您的#rect规则覆盖了您的.collapsed规则，因为它具有更高的特异性。 您可以改用#rect.collapsed 。
3. 您需要设置一个初始max-height和任意height大于或等于max-height在这两个州。

我在您的示例中注意到，您可以更轻松地转换height属性，但是我认为在您的实际项目中您无法？

 $("#toggle").click(function() { $("#rect").toggleClass("collapsed"); }); 

 #rect { background-color:red; max-height: 200px; height: 2000px; /* arbitrary value >= max-height */ -moz-transition: max-height 1s; -ms-transition: max-height 1s; -o-transition: max-height 1s; -webkit-transition: max-height 1s; transition: max-height 1s; } #rect.collapsed { max-height: 100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="rect"></div> <button id="toggle">hi</button>