Framer Motion AnimatePresence 嵌套导入问题

Question

看来我遇到了一个关于 Framer Motion 的特殊问题，它是关于导入具有 motion.div 属性的组件的 exitBeforeEnter 标签。

以下按预期工作：

<AnimatePresence exitBeforeEnter> 
<div>
    <CoverImageComp var={blah} var={blah}/>
    <AnimatePresence exitBeforeEnter>
      {!editing ? (
        <EditorComp key={router.pathname}/>
      :
        <PreviewComp key={router.pathname+'-preview'}/>
      )}
    </AnimatePresence>

</div>
</AnimatePresence>

但是，如果我将 CoverImageComp 放入 !editing 三元运算符中，则退出动画会中断 - 整个页面会移动到下一个页面（通过 onClick 事件）

    !editing ? (
        <>
         <CoverImageComp var={blah} var={blah}/>
         <EditorComp key={router.pathname}/>
        </>
    ): ...

以上似乎不起作用，我的第一个假设是向 CoverImageComp 添加一个唯一键，就像 router.pathname+'-cover' 一样。我还尝试用 AnimatePresence 包装编辑块，但也没有提供所需的结果。

导入的组件在其容器 div 上附加了以下运动标签也是毫无意义的：

<motion.div
   variants={{
    initial: {
        x: '500px',
    },
    animate: {
        x: '0px',
    },
    exit: {
        x: '500px',
    },
    }}
    initial={'initial'}
    animate={'animate'}
    exit={'exit'}
    transition={{
        type: 'spring', mass: 0.35, stiffness: 45,
    }}
    className={styles.editor_form}
>

我确定我正在按照 Framer 的 API 中列出的说明进行操作，但我一定是遗漏了什么！？非常感谢任何帮助或指导。

Answer 1

来自

  !editing ? (
        <>
         <CoverImageComp var={blah} var={blah}/>
         <EditorComp key={router.pathname}/>
        </>
    ): ...

至

  !editing ? (
        <React.Fragment key={router.pathname}>
         <CoverImageComp var={blah} var={blah}/>
         <EditorComp />
        </React.Fragment>
    ): ...

我知道这感觉很奇怪，但 <> 是糖分或取决于您的导出方式。像其他组件一样，它们需要一个密钥让 framer 知道它们是否改变。

https://reactjs.org/docs/fragments.html#keyed-fragments

Framer Motion AnimatePresence 嵌套导入问题

Framer Motion AnimatePresence Nested Import Problem

reactjs

animation

next.js

framer-motion