无法实现与Framer Motion的反应路由器页面之间的平稳过渡
无法实现与Framer Motion的反应路由器页面之间的平稳过渡
提问于 2020-07-28 01:02:39
现在已经过了一周了，我无法让它正常工作！我试图在react页面组件之间进行转换，让它在每个page.however上上下滚动，在退出页面上显示第二个页面需要更长的时间，我不知道如何同步它，所以当第一个页面上升时，第二个页面同时开始上升。
我使用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>回答 1
Stack Overflow用户
发布于 2020-07-30 11:57:43
您可能已经拥有它了，但是您是否将keys添加到<AnimatePresence中的页面中呢？根据我的经验，忘记它们会导致页面/组件之间的动画问题。
我遇到的另一个问题是，key没有设置在<AnimatePresence>的直接子级上(我在AnimatePresence和页面之间有布局组件)。
也许您已经正确地设置了这一切，只是为了确保:)
在我目前的项目中：
<AnimatePresence exitBeforeEnter>
<Component
{...pageProps}
key={router.route}
err={err}
/>
</AnimatePresence>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63125632
复制相关文章
相似问题
腾讯云开发者
