reactjs div transition 当高度变化时 滑出

要实现一个高度变化时滑出的效果，可以使用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文件。

希望对你有所帮助