Question

我有3个组成部分。其中2个并行运行动画。第三，必须在两个组件完成其动画之后才能一致地运行动画。如何通过反应弹簧达到此目的？

Answer 1

公共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

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

1 个答案: