3

现在已经一个多星期了，我无法让它工作！，我正在尝试在反应页面组件之间进行转换，让它在每个页面上上下滚动。但是，在退出页面上，第二页需要显示时间更长，我不知道如何同步它，所以当第一页上升时，第二页也同时开始上升。

我正在使用AnimatePresence和exitBeforeEnter包装应用程序组件。感谢对正确方向的任何帮助。

以下是我对每个组件的变体

const containerVariants = {
  hidden: {
    opacity: 0,
    y: "-100vh",
  },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      type: "spring",
      stiffness: 15,
      damping: 10,
      mass: 0.4,
      staggerChildern: 0.4,
      // opacity: { duration: 0.02 },
      when: "beforeChildren",
    },
  },
  exit: {
    opacity: 0,
    y: "-100vh",
    zIndex: 0,
    transition: {
      type: "spring",
      stiffness: 15,
      opacity: { duration: 3 },
    },
  },
};

const Home = () => {
 
  return (
    <motion.div
      variants={containerVariants}
      initial="hidden"
      animate="visible"
      exit="exit"
    >
< code goes here>
    </motion.div>
4

1 回答 1

0

您可能已经拥有它，但是您是否将keys 添加到里面的页面中<AnimatePresence？根据我的经验，忘记它们会导致页面/组件之间的动画问题。

我遇到的另一个问题是因为没有在（我在 AnimatePresence 和页面之间有布局组件）key的直接子级上设置。<AnimatePresence>

也许您已经正确设置了所有这些，只是为了确定:)

在我目前的项目中：

<AnimatePresence exitBeforeEnter>
  <Component
    {...pageProps}
    key={router.route}
    err={err}
  />
</AnimatePresence>
于 2020-07-30T11:57:43.050 回答