2

我使用 nextjs 和 framer动作做了以下

我有一个我正在映射的图像列表，并为它们分配了一个 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；

4

1 回答 1

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>
于 2021-09-26T14:48:03.627 回答