ReactJS 实现 div 滑出动画：CSS 动画和过渡

要在 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 会滑出屏幕。