Framer Motion Page Transition Next JS Router.push答案

【问题标题】：Framer Motion Page Transition Next JS Router.pushFramer Motion Page Transition Next JS Router.push
【发布时间】：2021-11-14 03:16:27
【问题描述】：

我使用 nextjs 和 framer motion做了以下操作

我有一个要映射的图像列表，并为它们分配一个 layoutid 和一个可选的动画变体。 layoutid对应model1、model2、model3页面上的layoutid。

当前行为

当第一次进入主页并单击图像时，我会更新一些状态并将变体动画设置为 false，然后告诉该图像使用 layoutid，然后淡出其他图像并将单击的图像动画化为放置在加载的组件上（模型 1、模型 2、模型 3）...很好用！

如果您随后在导航中单击主页并再次尝试单击某个项目，则它不起作用，所有图像都会淡出并且单击的图像不会动画。

在首页点击刷新，就可以正常使用了！

这是页面的代码，我怀疑它可能与 _app.js 中的路由或设置有关

export default function Home() {
const router = useRouter();
const [isClicked, setIsClicked] = useState(null);

const onHandlerClick = (item, href, e) => {
    e.preventDefault();
    setIsClicked(item);
    router.push(href, { scroll: false });
};

return (
    <div className="l-grid l-grid-outter">
        <div className="c-home-maincontent">
            <div>
                <main>
                    <motion.div className="l-grid-3-col" initial="initial" animate="enter" exit="exit" variants={{ exit: { transition: { staggerChildren: 0.1 } } }}>
                        {images.map((item, index) => {
                            return (
                                <motion.div
                                    key={index}
                                    className="c-home-overflowimage c-home-overflowimage2"
                                    layoutId={`imageAnimation${item}`}
                                    variants={isClicked === item ? false : postVariants}
                                    transition={{ ...transition }}
                                >
                                    <a href={`/model${item}`} onClick={(event) => onHandlerClick(item, `/model${item}`, event)}>
                                        <motion.img
                                            src="/yasmeen.webp"
                                            whileHover={{
                                                scale: 1.1,
                                            }}
                                        />
                                    </a>
                                </motion.div>
                            );
                        })}
                    </motion.div>
                </main>
            </div>
        </div>
        <Footer />
    </div>
);
}
function MyApp({ Component, pageProps }) {
const router = useRouter();

return (
    <>
        <DefaultSeo {...Seo} />
        <AnimateSharedLayout type="crossfade">
            <AnimatePresence exitBeforeEnter initial={false}>
                <Component {...pageProps} key={router.asPath} />
            </AnimatePresence>
        </AnimateSharedLayout>
    </>
);
}

导出默认 MyApp；

【问题讨论】：

标签： next.js framer-motion next-router

【解决方案1】：

更新了代码以包含一个动画设置为假，如果它被点击的项目

<motion.div className="l-grid-3-col" initial="initial" animate="enter" exit="exit">
    {images.map((item, index) => {
        return (
            <motion.div
                key={index}
                className="c-home-overflowimage c-home-overflowimage2"
                layoutId={`imageAnimation${item}`}
                animate={isClicked === item ? false : true}
                variants={isClicked === item ? false : postVariants}
                transition={{ ...transition }}
            >
                <a href={`/model${item}`} onClick={(event) => onHandlerClick(item, `/model${item}`, event)}>
                    <motion.img
                        src="/yasmeen.webp"
                        whileHover={{
                            scale: 1.1,
                        }}
                    />
                </a>
            </motion.div>
        );
    })}
</motion.div>

【讨论】：