如何为动态宽度内容添加动画效果？

Question

假设我们有一个带有输入字段的按钮，其中输入字段会增长以占用可用空间：

当按钮被点击时，按钮旁边会出现额外的上下文信息。

内容的宽度是动态的 - 我们不能硬编码它。输入会自然地缩小。

您将如何为动态内容的出现添加动画效果，以便它从按钮后面滑出？

我正在寻找一个CSS动画解决方案。 游乐场

- Misha Moroshko

---

我所知道的只有一种方法......它不是纯CSS，但几乎是：https://aerotwist.com/blog/flip-your-animations/ - Josep

Answer 1

你可以使用关键帧动画实现这个效果。关键是要设置一个大于元素实际大小的max-width。请注意，动画时间取决于最大宽度的总和。

CSS

.test {
  animation-name: test;
  animation-duration: 1s;
  animation-direction: forwards;
  overflow: hidden;
  white-space: nowrap;
}
@keyframes test {
  0% {
    max-width: 0;
  }
  100% {
    max-width: 200px;
  }
}

然后你需要将该类添加到你的动态对象中

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="container">
      <button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? "Hide" : "Show"}
      </button>
      {isOpen && <div class='test'>Dynamic Content</div>}
      <input type="text" />
    </div>
  );
}

你可以切换动画持续时间并在删除时也执行它，但我会让你自己玩。 https://codesandbox.io/s/6wj6z1ppxr

- nathan.medz

---

非常好，Nathan。 - Bibberty

@nathan.medz 有趣的想法！能否分享一个包括移除动画的完整示例？ - Misha Moroshko

@MishaMoroshko 我已经编辑了沙盒。 - nathan.medz

这是一个不错的想法，但如果内容非常动态，则可能会出现问题。特别是当您隐藏内容且max-height远大于实际内容时，这一点尤为明显。在这种情况下会有明显的延迟。 - Misha Moroshko

@MishaMoroshko 在一个回答中添加了一个链接，解释了在时间函数中使用 cubic-bezier 的工作原理，并将其添加到重复链接列表中。 - Asons