主页 / coding / 问题 / 79305372
Accepted
Michał Turczyn
Asked: 2024-12-24 18:46:24 +0800 CST

当元素没有明确高度时，使用三次贝塞尔（或类似效果）实现“弹跳效果”

  • 772

我希望 HTML 元素能够向下扩展，最后还能稍微弹跳一下，就像cubic-bezier函数可以做到的那样。

因此，我在 CSS 中设置了transition: height ...动画来改变height元素的属性。但是，只有当我明确设置高度时，它才有效，而不是100vh只包含所有元素。

为了更好地展示，下面是示例：当绿色容器的高度max-height小于其实际高度（以容纳其子项）时，效果可见且有效。但我不依赖容器的自动调整大小来适应其子项。

当我指定某个“足够大”的东西来容纳所有可能的孩子时，当然，“弹跳效果”不起作用，因为它在达到“足够大”的高度时会“弹跳”，从而导致效果不可见。

您可以通过在下面的代码片段中指定不同的高度来观察该问题（3rem 或以下 - 有效，4rem 或以上 - 无效）。

function expand(){
    let dropdown = document.getElementById('dropdown')
    let height = dropdown.offsetHeight
    let maxHeightInput = document.getElementById('maxHeightInput')
    let maxHeight = maxHeightInput?.value ?? 0
    dropdown.style.maxHeight = height > 0 ? 0 : maxHeight
}
#dropdown {
    background: lightgreen;
    max-height: 3rem;
    transition: max-height 0.4s cubic-bezier(.04,1.59,.83,1.18);
    & > ul {
        border: 1px solid black;    
    }
}
<label>Green container expanded max height <input id='maxHeightInput' value='3rem' /></label><br>
<p>List of items is ~3rems tall.</p>
<button onclick={expand()}>Expand / collapse</button>
<div id='dropdown'>
<ul>
<li>Item 1
<li>Item 2
<li>Item 3
</ul>
</div>

问题是如何在我的场景中使这种弹跳效果发挥作用：当我有一个带有子项的容器时，容器的大小会根据其子项动态调整。

javascript

2 个回答

  1. 如果我没记错的话，你的问题就是使用弹跳效果来为父元素高度设置动画，那么这里有一个可行的解决方案（使用与此相关答案类似的代码：将高度从 0 设置为 auto），以便为可折叠父元素创建弹跳效果。
    它使用委托事件和可重用组件原则，其中目标 ID 存储在按钮的 data-* 属性中：

    addEventListener("click", (evt) => {
  const elToggle = evt.target.closest("[data-toggle]");
  if (!elToggle) return;
  document.querySelector(elToggle.dataset.toggle).classList.toggle("expanded");
});
    .dropdown {
  > * {
    padding: 0; margin: 0;
    list-style: none;
    background: lightgreen;
    
    overflow: hidden;
    interpolate-size: allow-keywords;
    transition: height 0.4s cubic-bezier(0.04, 1.59, 0.83, 1.18);
    block-size: 0; /* Or also:  height: 0; */
  }

  &.expanded > * {
    block-size: auto; /* Or also:  height: auto; */
  }
}
    <button data-toggle="#dropdown-1" type="button">Expand / collapse</button>
<div class="dropdown" id="dropdown-1">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

<button data-toggle="#dropdown-2" type="button">Expand / collapse</button>
<div class="dropdown" id="dropdown-2">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
</div>

    • 3
  2. Best Answer

    由于您正在使用 JS，因此您可以height在0和之间切换scrollHeight：

    function expand() {
  const dropdown = document.getElementById('dropdown');
  dropdown.style.height = dropdown.offsetHeight > 2 ? 0 : dropdown.scrollHeight + 'px'
}
    #dropdown {
  background: lightgreen;
  height: 0;
  overflow: hidden;
  transition: height 0.4s cubic-bezier(.04, 1.59, .83, 1.18);
  border: 1px solid black;
}
    <button onclick="expand()">Expand / collapse</button>
<div id='dropdown'>
  <ul>
    <li>Item 1
    <li>Item 2
    <li>Item 3
  </ul>
</div>

    • 1

相关问题