reactjs - react-spring中如何等待完成两个平行动画？

Question

我有 3 个组件。其中 2 个并行运行动画。第三必须只有在两个组件完成动画后才能一致地运行动画。如何使用 react-spring 实现这一目标？

Answer 1

common api中有一个onRest回调。它在动画完成时调用。您可以使用它们触发 setState。根据该状态，您可以触发第三个动画。请注意，即使您没有看到变化，每次渲染后都会调用 onRest。因此，如果您不想要无限循环，请确保限制状态更改的次数。

像这样的东西：

const AnimContainer = () => {
  let [phase, set] = useState([0, 0]);
  const props1 = useSpring({
    from: { opacity: 0 },
    to: { opacity: 1 },
    config: { mass: 50, friction: 80 },
    clamp: true,
    onRest: () => !phase[0] && set([phase[0] + 1, phase[1]])
  });
  const props2 = useSpring({
    from: { opacity: 0 },
    to: { opacity: 1 },
    onRest: () => !phase[1] && set([phase[0], phase[1] + 1])
  });
  const props3 = useSpring({
    from: { opacity: 0 },
    to: { opacity: phase[0] && phase[1] ? 1 : 0 },
    clamp: true
  });

  return (
    <>
      <div>{"state: " + phase.join(", ")}</div>
      <animated.div style={props1}>one</animated.div>
      <animated.div style={props2}>two</animated.div>
      {phase[0] > 0 && phase[1] > 0 && (
        <animated.div style={props3}>three</animated.div>
      )}
    </>
  );
};

沙箱：https ://codesandbox.io/s/bold-maxwell-3gftl