动画 TextArea 高度会导致 Text 跳跃

Question

当用户更改内容时，我试图为 TextArea 的高度设置动画。

添加内容时，高度增加导致文字跳转。 删除内容时，高度按预期设置动画，文本不会跳跃

有人可以解释为什么会发生这种情况以及如何预防吗？

这是相关的代码

import React from "react";
import TextAreaAutoSize from "react-textarea-autosize";


export default function App() {
  return (
    <TextAreaAutoSize
      style={{
        overflow: "hidden",
        padding: 0,
        transition: "all .3s"
      }}
    />
  );
}

这是代码和框https://codesandbox.io/s/festive-glade-j5311?file=/src/App.js

漏洞视频https://streamable.com/puwply

谢谢！

Answer 1

发生这种情况是因为当您为容器提供 0.3 秒的过渡时间时，文本会立即获得新高度。 所以在 0.3 秒内，文本高于框。 我没有简单的解决方案，但我更喜欢没有动画的外观。