如何为动态宽度内容设置动画？

Question

比方说，我们有一个带有输入字段的按钮，其中输入字段不断增长以占据可用空间：

单击按钮后，按钮旁边会显示其他上下文：

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

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

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

Playground

Answer 1

您可以使用关键帧动画来执行此操作。关键是将最大宽度设置为大于元素的大小。请注意，动画时间会考虑总的最大宽度。

CSS

.test {
  animation-name: test;
  animation-duration: 1s;
  animation-direction: forwards;
  overflow: hidden;
  white-space: nowrap
}
@keyframes test {
  0% {
    max-width: 0px
  }
  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