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

Question

<分区>

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