如何使用React的useTransition Hook进行过渡动画

useTransition Hook可以帮助我们在React中实现过渡动画。以下是一个简单的例子，演示如何使用useTransition Hook进行过渡动画：

import React, { useState, useRef } from 'react';
import { useTransition, animated } from 'react-spring';

const App = () => {
  const [show, setShow] = useState(false);
  const transitions = useTransition(show, null, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
  });

  return (
    <div>
      <button onClick={() => setShow(!show)}>Toggle</button>
      {transitions.map(({ item, key, props }) =>
        item && (
          <animated.div key={key} style={props}>
            <h1>Hello, World!</h1>
          </animated.div>
        )
      )}
    </div>
  );
};

export default App;

在上面的例子中，我们引入了useTransition和animated两个元素，useTransition接受三个参数：状态（show）、唯一键（null）和动画配置对象。在点击按钮时，我们通过setShow方法来改变show状态，根据状态的变化，transitions数组中的动画会被触发。

transitions.map方法用于遍历transitions数组，根据item的值来控制动画元素的显示和隐藏。在这个例子中，我们在页面上展示了一个简单的标题，并在执行过渡动画时改变其透明度。

这只是一个简单的例子，你可以根据自己的需求来定制更复杂的过渡动画效果。使用React的useTransition Hook可以让我们更方便地实现页面元素的过渡动画。