Framer Motion Page Transition Next JS Router.push

Question

我使用 nextjs 和 framer 制作了以下内容motion

我有一个我正在映射的图像列表，并为它们分配了一个布局 ID 和一个可选的动画变体。 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；

Answer 1

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

<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>

Framer Motion Page Transition Next JS Router.push

Framer Motion Page Transition Next JS Router.push

next.js

framer-motion

next-router