如何使用 AnimatePresence 实现干净的进入和退出？答案

【问题标题】：How to use AnimatePresence for clean entry and exit?如何使用 AnimatePresence 实现干净的进入和退出？
【发布时间】：2023-01-11 15:50:39
【问题描述】：

我正在尝试使用 Framer Motion 的 AnimatePresence 组件在我的下一个应用程序中制作干净的进入/退出动画。我试过使用延迟组件，但只适用于一个组件。对于其他组件，它们只是消失而没有任何动画。预期行为和当前行为如下所示：

Expected & Working behavior

Current & Not Working Behavior

各组件代码如下：

<AnimatePresence>
                  {isAboutVisible && (
                    <motion.div
                      initial={{ x: 1050, opacity: 0 }}
                      animate={{ x: 0, opacity: 1 }}
                      transition={{
                        duration: 1.5,
                        ...(isSkillsVisible || isProjectsVisible
                          ? { delay: 1.5 }
                          : {}),
                      }}
                      exit={{ x: 1050, opacity: 0 }}
                    >
                      <About />
                    </motion.div>
                  )}
                </AnimatePresence>
                <AnimatePresence>
                  {isSkillsVisible && (
                    <motion.div
                      initial={{ x: 1050, opacity: 0 }}
                      animate={{ x: 0, opacity: 1 }}
                      transition={{
                        duration: 1.5,
                        delay: 1.5,
                      }}
                      exit={{ x: 1050, opacity: 0 }}
                    >
                      <Skills />
                    </motion.div>
                  )}
                </AnimatePresence>
                <AnimatePresence>
                  {isProjectsVisible && (
                    <motion.div
                      initial={{ x: 1050, opacity: 0 }}
                      animate={{ x: 0, opacity: 1 }}
                      transition={{ duration: 1.5, delay: 1.5 }}
                      exit={{ x: 1050, opacity: 0 }}
                    >
                      <Projects />
                    </motion.div>
                  )}
                </AnimatePresence>

【问题讨论】：

标签： typescript next.js tailwind-css framer-motion

【解决方案1】：

我认为所有条件都必须在一个 AnimatePresence 中，并且必须向其中添加 exitBeforeEnter 道具

像这样的东西：

 <AnimatePresence  exitBeforeEnter initial={false}>
          {isAboutVisible && (
            <motion.div
              initial={{ x: 1050, opacity: 0 }}
              animate={{ x: 0, opacity: 1 }}
              transition={{
                duration: 1.5,
                ...(isSkillsVisible || isProjectsVisible ? { delay: 1.5 } : {}),
              }}
              exit={{ x: 1050, opacity: 0 }}
            >
              <About />
            </motion.div>
          )}
          {isSkillsVisible && (
            <motion.div
              initial={{ x: 1050, opacity: 0 }}
              animate={{ x: 0, opacity: 1 }}
              transition={{
                duration: 1.5,
                delay: 1.5,
              }}
              exit={{ x: 1050, opacity: 0 }}
            >
              <Skills />
            </motion.div>
          )}
          {isProjectsVisible && (
            <motion.div
              initial={{ x: 1050, opacity: 0 }}
              animate={{ x: 0, opacity: 1 }}
              transition={{ duration: 1.5, delay: 1.5 }}
              exit={{ x: 1050, opacity: 0 }}
            >
              <Projects />
            </motion.div>
          )}
        </AnimatePresence>

【讨论】：