动画存在在下一个 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 以用于有条件地渲染子组件。就您而言（模态窗口），我认为这不是您想要的。

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的代码/库中查找问题

你也在你的 div 中输入（？ok 2 exit？）：

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

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

附：如果您需要移动“更高”，您只需包装您的父组件，或者您可以将代码包装在您的_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 正在努力检测用户的位置。很抱歉修改部分之前的混乱信息。

附：还要检查this