如何让react-spring触发另一个弹簧？代码为何未按预期运行？

你的问题出在第二个弹簧默认会自动启动动画，即便后续调用pinkSpringAPI.stop()，也可能因执行时机晚于动画启动时机，导致两个弹簧同时运行。另外，useSpring的命令式API需要配合正确的初始配置来控制动画启动时机。

修正后的代码 #

const [blueSpring, blueSpringAPI] = useSpring(
  () => ({
    from: { x: 0 },
    to: { x: 100 },
    config: { duration: 3000 },
    onRest: () => {
      pinkSpringAPI.start();
    },
  }),
  []
);

const [pinkSpring, pinkSpringAPI] = useSpring(
  () => ({
    from: { y: 100 },
    to: { y: 200 },
    config: { duration: 3000 },
    pause: true, // 初始暂停，阻止自动启动动画
  }),
  []
);

关键说明 #

• 在第二个弹簧的配置中添加pause: true，让它初始化时就处于暂停状态，不会自动播放动画。
• 无需再调用pinkSpringAPI.stop()，pause: true已从根源阻止了自动启动。
• 第一个弹簧的onRest回调会在自身动画结束时触发pinkSpringAPI.start()，实现顺序播放的效果。

内容的提问来源于stack exchange，提问作者Aaron