Question

我有一个特定高度的div，当我切换＆＃34;折叠＆＃34;如果div太高，它应该缩小到特定的最大高度。我一直试图让这种萎缩变得有活力，但还没有想到它。我已经在网上查了一遍，似乎在元素上加上以下几行就足够了。

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

然而，无论我分配哪些类，它都没有工作。我有一个jsfiddle。

关于如何做到这一点的任何想法？谢谢！

Answer 1

transition仅在您正在更改的高度属性未解析为auto时才有效。

我已更新your jsfiddle以反映所需的更改。

Answer 2

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

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

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

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

动画在最大高度？

2 个答案: