动画 TextArea 高度会导致文本跳跃答案

【问题标题】：Animating TextArea height causes Text to jump动画 TextArea 高度会导致文本跳跃
【发布时间】：2021-02-04 09:42:16
【问题描述】：

当用户更改内容时，我正在尝试为 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

谢谢！

【问题讨论】：

我不熟悉react，但似乎高度正在重置？另一个线索：当我点击左侧的文件夹然后再回到浏览器时，不再发生跳转
我检查过，但即使在单击文件夹后添加内容时，文本仍然会跳来跳去。 @斯科特

标签： javascript css reactjs

【解决方案1】：

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

【讨论】：