javascript - CSS/JavaScript动画高度会随着高度的变化而展开和折叠

我正在尝试创建一个带有各种选项卡的菜单，可以单击这些菜单来展开，然后再次单击以折叠。

我已成功使用css动画/过渡通过更改最大高度来实现此目的。但是，每个盒子将容纳不同数量的内容物，从而导致高度不同。依次导致它们各自以不同的速度进行动画处理。

展开盒子并不是什么大问题，但是再次折叠它们时非常明显，因为有些盒子会在一段时间内什么都不做，然后突然突然关闭，而另一些盒子以平稳的运动闭合。

CSS的示例，再加上一些简单的jQuery，用于添加和删除活动ID：

.options .optionTab > div {
    max-height: 0;
    overflow: hidden;
    transition: max-height 2s ease;
}

.options .optionTab#active > div {
    max-height: 1000px;
    transition: max-height 2s ease;
}

$(".optionTab > h3").click(function() {
    if($(this).closest(".optionTab").attr("id") == "active") {
        $(this).closest(".optionTab").attr("id", "");
    }
    else {
        $(this).closest(".optionTab").attr("id", "active");
    }
});

JSFiddle

有没有一种方法可以使用css或javascript动画在不同高度的项目之间实现一致的动画速度？

最佳答案

手风琴

您可以使用JqueryUI Accordion并使用自定义css修改接口，以使其完全符合您的外观。这将节省您的时间，您可以投资于该项目的其余部分

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Accordion - Collapse content</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#accordion" ).accordion({
      collapsible: true,
      active: false
    });
  } );
  </script>
</head>
<body>

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
  </div>
</div>


</body>
</html>

javascript - CSS/JavaScript动画高度会随着高度的变化而展开和折叠-LMLPHP

关于javascript - CSS/JavaScript动画高度会随着高度的变化而展开和折叠，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59642656/