css - react 动画容器高度

Question

我有一个演示 here

这是一个 super 简单的应用程序，有四个按钮和一个文本区域。

当你点击一个按钮时它加载不同的文本

文本的长度不同，所以灰色容器变得越来越高和越来越短

是否可以在文本变高和变短时为灰色框设置动画

const [text, setText] = useState(textArr[3])

  return (
    <div>
      <div className="nav">
        <button onClick={() => setText(textArr[0])}>
          One
        </button>
        <button onClick={() => setText(textArr[1])}>
          Two
        </button>
        <button onClick={() => setText(textArr[2])}>
          Three
        </button>
        <button onClick={() => setText(textArr[3])}>
          Four
        </button>
      </div>  
      <div className="text">
        {text}
      </div>
    </div>
  );

Answer 1

我放置了一个应用了 overflow: hidden 的父 div，然后我使用 useEffect 来计算文本更改时文本 div 的高度，然后我设置父div的高度到这个高度。

在父 div 上使用 transition，它会产生动画效果。

在此处查看演示:https://stackblitz.com/edit/react-t7ctuf?file=src%2FApp.js