最大高度上的动画

Animation on max-height?

本文关键字：动画 高度      更新时间：2023-09-26

我有一个具有特定高度的div，当我切换"折叠"类时，如果div太高，它应该收缩到特定的最大高度。我一直在尝试将这种收缩动画化，但还没有弄清楚。我在网上查了一下，似乎在元素中添加以下几行就足够了。

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

然而，不管我把它们分配给哪个类，它都不起作用。

有什么想法吗？谢谢

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

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

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

  1. 您需要添加一个特性以在transition中设置动画。在您的案例中为max-height
  2. 您的#rect规则覆盖了.collapsed规则，因为它具有更高的特异性。您可以改用#rect.collapsed
  3. 您需要设置一个初始max-height和一个在两种状态下都大于或等于max-height的任意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>

相关文章：