Как ждать завершения двух параллельных анимаций в реагирующей весне?

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