reactjs div 滑出动画

要在React中实现一个div的滑出动画，可以使用CSS动画和React的过渡动画库。

首先，使用CSS动画创建一个div的滑出效果。可以使用@keyframes规则定义一个动画，然后将其应用到目标div上。例如，以下是一个向左滑出的动画：

@keyframes slideOut {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.slide-out {
  animation: slideOut 1s forwards;
}

然后，在React组件中使用这个CSS类名来应用滑出动画。假设你有一个名为MyComponent的组件，其中包含一个需要滑出的div：

import React, { useState } from 'react';
import './MyComponent.css';

const MyComponent = () => {
  const [isHidden, setIsHidden] = useState(false);

  const handleButtonClick = () => {
    setIsHidden(true);
  };

  return (
    <div>
      {!isHidden && (
        <div className="slide-out">
          {/* 内容 */}
        </div>
      )}
      <button onClick={handleButtonClick}>滑出</button>
    </div>
  );
};

export default MyComponent;

在上面的代码中，通过设置isHidden状态来决定是否显示滑出的div。当点击按钮时，调用handleButtonClick函数，将isHidden状态设置为true，从而触发滑出动画。

最后，在组件的CSS文件中定义滑出动画的样式：

.slide-out {
  animation: slideOut 1s forwards;
}

这样，当点击按钮时，div会滑出屏幕