在react spring动画完成时更改状态，

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

const App = () => {
  const [isAnimated, setIsAnimated] = useState(false);

  const animation = useSpring({
    opacity: isAnimated ? 1 : 0,
    transform: isAnimated ? 'translateY(0)' : 'translateY(-100px)',
    onRest: () => {
      // 动画完成时触发的回调函数
      // 在这里可以更改状态或执行其他操作
      console.log('Animation completed');
      // 更改状态示例
      setIsAnimated(true);
    },
  });

  return (
    <div>
      <animated.div style={animation}>
        {/* 动画内容 */}
        <h1>Hello, React Spring!</h1>
      </animated.div>
      <button onClick={() => setIsAnimated(!isAnimated)}>
        {isAnimated ? 'Reset Animation' : 'Start Animation'}
      </button>
    </div>
  );
};

export default App;