Animate presence 仅在退出动画的下一个 js 中不起作用？

Question

我试图在下一个 js 中为我的组件设置退出动画，但我只能提供初始动画。

谁能告诉我这里出了什么问题？？

这是我的示例代码：

 <AnimatePresence >
        <motion.div key="modalBackground" className={styles['auth-modal-layout']} key="modalBackground" initial="hidden" animate="visible" variants={
                {
                    hidden:{
                        opacity:0
                    },
                    visible:{
                        opacity:1,
                        transition:{
                            duration:.4,
                        }
                    },
                }
            } >
            
            <motion.div key="modalForm" className={styles['auth-modal-form']} initial="hidden" exit="pageExit" animate="visible" exit="hidden"  variants={{
                hidden:{
                    translateY:100,
                    opacity:0
                },
                visible:{
                    translateY:0,
                    opacity:1,
                    transition:{
                        duration:.4
                    }
                },
                pageExit:{
                    opacity:0,
                    transition:{
                        when:"afterChildren",
                        duration:.4
                    }
                }
            }} >
                {modal()}
            </motion.div>
               
        </motion.div>
        </AnimatePresence>

Answer 1

<AnimatePresence> 需要包装有条件渲染的组件。它不能在里面。

您需要将 <AnimatePresence> 标记移动到更高级别或将您的条件逻辑移动到组件中。您很可能会选择前者，如下所示：

<AnimatePresence>
    {modalIsVisible && <ModalComponent />}
</AnimatePresence>

（在此示例中 ModalComponent 包含您上面显示的代码）。

否则，您需要始终渲染组件并传入一个 prop 以用于有条件地渲染子组件。在你的情况下（模态window）我认为这不是你想要的。

Answer 2

你这样做，更多例子here:

  <AnimatePresence>
     <motion.div
        // initial state opacity
        initial={{ opacity: 0 }}
        //animation of component appearence
        animate={{ opacity: 1 }}
        // how your element will appears f.e(duration in seconds)
        transition={{ delay: 0.5 }}
        // your exit animation
        exit={{ opacity: 0 }}
      >
       {your_content_here}
      </motion.div>
  </AnimatePresence>

如果您发出一些错误，那不是 nextjs。尝试在 framer

的 code/lib 中查找问题

您还在 div 中输入（？确定 2 退出？）：

initial="hidden" exit="pageExit" animate="visible" exit="hidden"

检查 valid motion components。始终尝试从文档中获取示例。

P.S。如果你需要移动“更高”，你只需包装你的父组件，或者你可以将代码包装在你的 _app.js 中。 但是这种方法意味着每个页面都会加载framer lib的AnimatePresence代码。

function MyApp({ Component, pageProps }) {
  
  return (
    <AnimatePresence>
     <Component {...pageProps} />
    </AnimatePresence>
  )
  
}

修改： 我已经检查了 AnimatePresence 行为，它实际上并没有在做他的工作。我检查了我是如何做同样的事情的。这是一个如何做到这一点的想法，代码示例如下。

//npm install this before: npm i react-intersection-observer
import { useInView } from "react-intersection-observer";

//in your hooks part, where you place hooks
const controls = useAnimation();
const [ref, inView] = useInView();
useEffect(() => {
  if (inView) {
     controls.start("visible");
  }
  else {
     controls.start("hidden");
  }
}, [controls, inView]);

//and the component, check how I did it (example)
<motion.div
 style={{marginTop: '1000px', marginBottom: '1000px'}}
 ref={ref}
 animate={controls}
 initial="hidden"
 transition={{ duration: 2 }}
 variants={{
     visible: { opacity: 1, scale: 1 },
     hidden: { opacity: 0, scale: 0 }
 }}

>
   <img src="https://super-monitoring.com/blog/wp-content/uploads/2020/03/framer.png"></img>
</motion.div>

由于很多我不记得的原因，我没有使用AnimationPresence。问题 AnimationPresence 它没有清楚地“理解”用户目前 在页面上的位置。我认为这就是他们在 framer examples 中添加 isVisible 变量的原因。 react-intersection-observer 正在检测用户所在的位置。很抱歉修改部分之前的混乱信息。

P.S。还要检查 this

Animate presence 仅在退出动画的下一个 js 中不起作用？

Animate presence not working in next js for exit animations only?

javascript

css

reactjs

next.js

framer-motion