Ошибка выхода Framer motion Animate Presence

Question

У меня проблема с компонентом AnimatePresence framer-motion. Я пытаюсь запустить анимацию после того, как компонент станет видимым в области просмотра, для этого я использовал реакцию-пересечение-наблюдатель. Он работает так, как предполагалось для начальной анимации, но анимация выхода прерывается, и я не уверен, что вызывает проблему. Я создал песочницу, которая воспроизводит это поведение на https://codesandbox.io/s/holy-dream-rb5gu?file=/src/index.js

Answer 1

Похоже, что использование императивного API AnimationControls переопределяет другие настройки декларативной анимации для элемента (например, exit).

Изменение этого animateprop, чтобы просто принять вариант вместо элемента управления анимацией, похоже, работает:
пример Code Sandbox

Я добавил состояние для текущего варианта. Начинается как hidden и обновления visible когда inView изменения:

// use variant instead of Animation Controls
const [variant, setVariant] = useState("hidden");

useEffect(() => {
  if (inView) {
    setVariant("visible");
  }
}, [inView]);

Затем используйте это состояние варианта, чтобы обновить опору анимации в div:

<AnimatePresence exitBeforeEnter>
  {show && (
    <motion.div
      ref={ref}
      variants={containerVariants}
      initial="hidden"
      animate={variant} // use variant instead of Animation Controls
      exit="hidden"
    >