ReactJS 实现高度变化时滑出内容的动画效果

要实现一个高度变化时滑出的效果，可以使用 React 的动画库，并结合 CSS 过渡效果。

首先，安装 React 动画库。执行以下命令：

npm install react-transition-group

然后，创建一个组件，并使用'Transition'组件来包装需要进行动画的元素。在'Transition'组件中，使用'in'属性来控制元素的显示和隐藏，使用'timeout'属性来设置动画的持续时间。

在'Transition'组件内部，使用'CSSTransition'组件来添加 CSS 过渡效果。设置'classNames'属性为自定义的类名，用于在元素的不同状态之间切换。在 CSS 中，可以根据这些类名来定义不同状态下的样式。

下面是一个示例代码：

import React, { useState } from 'react';
import { Transition, CSSTransition } from 'react-transition-group';
import './styles.css';

const App = () => {
  const [show, setShow] = useState(false);

  const handleToggle = () => {
    setShow(!show);
  };

  return (
    <div>
      <button onClick={handleToggle}>Toggle</button>
      <Transition in={show} timeout={300}>
        {(state) => (
          <div className={`box ${state}`}>
            <CSSTransition
              in={show}
              timeout={300}
              classNames='slide'
              unmountOnExit
            >
              <div className='content'>Hello, world!</div>
            </CSSTransition>
          </div>
        )}
      </Transition>
    </div>
  );
};

export default App;

在上述代码中，'box'类名用于设置元素的初始样式，'slide-enter'和'slide-exit'类名用于设置元素进入和退出时的动画效果。

接下来，在 CSS 文件中定义这些类名的样式：

.box {
  width: 200px;
  overflow: hidden;
  transition: height 300ms;
  height: 0;
}

.box.enter {
  height: 100px;
}

.box.exit {
  height: 0;
}

.content {
  background-color: #f1f1f1;
  padding: 10px;
}

.slide-enter {
  transform: translateY(-100%);
  opacity: 0;
}

.slide-enter-active {
  transform: translateY(0);
  opacity: 1;
  transition: transform 300ms, opacity 300ms;
}

.slide-exit {
  transform: translateY(0);
  opacity: 1;
}

.slide-exit-active {
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 300ms, opacity 300ms;
}

在上述代码中，'box'类名的高度在进入和退出时进行过渡动画，'slide-enter'和'slide-exit'类名的内容在进入和退出时进行滑动动画。

最后，将上述组件渲染到 DOM 中即可。

注意：上述代码中使用了 CSS 过渡效果，所以需要在项目中引入对应的 CSS 文件，并配置相应的构建工具（例如 Webpack）来处理 CSS 文件。

希望对你有所帮助！