Css Can'；无法通过帧移动实现页面之间的平滑过渡

现在已经一个多星期了，我不能让它工作了！，我正在尝试在react pages组件之间进行转换，以使其在每个页面上下滚动。但是，在退出页面上，第二个页面的显示时间较长，我不知道如何进行同步。因此，当第一个页面上升时，第二个页面也开始同时上升

我正在使用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>

const containerVariants={
隐藏的：{
不透明度：0，
y:“-100vh”，
},
可见：{
不透明度：1，
y:0，
过渡：{
类型：“弹簧”，
刚度：15，
阻尼：10，
质量：0.4，
儿童死亡率：0.4，
//不透明度：{持续时间：0.02}，
当：“在孩子之前”，
},
},
出口：{
不透明度：0，
y:“-100vh”，
zIndex:0，
过渡：{
类型：“弹簧”，
刚度：15，
不透明度：{持续时间：3}，
},
},
};
常量Home=（）=>{
返回(

您可能已经拥有了它，但是您是否将

键添加到
内的页面中了你好，Wiljan谢谢您的回复。我在开关补码中添加了键
，这会有什么不同吗e？@JohnYacoub我不完全确定React路由器的交换机在内部是如何工作的，我目前使用的是Next.JS。我发现这个例子使用了
内部
可能会有帮助吗？我第一眼看到的唯一区别是使用的键是location.pathname，而不是location.key，尽管我怀疑这会有什么区别.Hi wiljan！感谢您提供的代码片段，我尝试过，但没有做任何改变，因为键只是一个标识符，用于让AnimatePresence知道正在使用哪个组件。
<AnimatePresence exitBeforeEnter>
  <Component
    {...pageProps}
    key={router.route}
    err={err}
  />
</AnimatePresence>