用react写一个过渡动画

以下是一个使用React实现的简单过渡动画的示例：

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

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

  useEffect(() => {
    setShow(true);
  }, []);

  return (
    <div className="App">
      <h1>过渡动画示例</h1>
      <button onClick={() => setShow(!show)}>
        {show ? '隐藏' : '显示'}
      </button>
      {show && <div className="box"></div>}
    </div>
  );
}

export default App;

在这个示例中，我们使用了React的useState和useEffect来控制动画的显示和隐藏。当页面加载时，我们使用useEffect钩子将show状态设置为true，以便在页面加载时显示动画。

我们还在页面上添加了一个按钮，当点击按钮时，它将反转show状态，以便我们可以隐藏或显示动画。

最后，我们使用show状态来控制一个名为“box”的div元素的显示和隐藏。我们在CSS中使用了一个简单的过渡效果，以便在显示或隐藏时产生动画效果：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 0.5s ease-in-out;
  opacity: 1;
}

.box.hidden {
  opacity: 0;
  transform: scale(0);
}

这个CSS类定义了一个红色的正方形框，它具有一个0.5秒的过渡效果，可以在显示或隐藏时缓慢变化。我们还定义了一个名为“hidden”的CSS类，它将opacity设置为0并使用缩放将元素缩小到0大小，以便在隐藏时产生动画效果。

最后，我们使用简单的逻辑来在box元素上添加或删除“hidden”类，以便在显示或隐藏时触发动画：

<div className={`box ${show ? '' : 'hidden'}`}></div>

这个div元素的类名将动态设置为“box”和“hidden”之一，具体取决于show状态的值。当show为true时，它将只应用“box”类，因此元素将显示。当show为false时，它将应用“box”和“hidden”两个类，因此元素将隐藏并呈现动画效果。