如何为动态宽度内容设置动画？ [复制]

Question

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

单击按钮时，按钮旁边会出现额外的上下文：

内容的宽度是动态的 - 我们无法对其进行硬编码。输入自然会缩小。

如何为动态内容的外观设置动画，使其从按钮后面滑动？

我正在寻找 CSS 动画解决方案。

Playground

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