小编cap*_*uke的帖子

我不知道如何<AnimateSharedLayout />通过成帧器运动为组件的路由设置动画。基本上，在下面的代码中，我想显示图像列表，当单击它们时，我想导航到/images/[image_id]并显示它。我本地没有图像，所以我必须获取它们。这里存在一些问题：

1. 第一次在索引页面上获取相同的元素，然后在详细信息页面上重新获取（如果有办法将其带到详细信息页面，那就太好了）
2. 在改变路线之前，页面自动滚动到顶部，破坏了动画；
3. 如果用户的网络速度较慢，则动画会出现延迟甚至无法启动；
4. 返回到上一个路线不会重播动画（我可能必须缓存 api 调用以避免重新获取它们？）

这是代码_app.tsx

import '../styles/globals.css';
import 'bulma/css/bulma.css';
import { AppProps } from "next/app";
import { AnimateSharedLayout, AnimatePresence } from 'framer-motion';

const MyApp: React.FC<AppProps> = ({ Component, pageProps, router }) => {
    return (
        <AnimateSharedLayout>
            <AnimatePresence>
                <Component {...pageProps} key={router.route} />
            </AnimatePresence>
        </AnimateSharedLayout>
    );
}

export default MyApp;

这是pages/index.tsx

import { motion } from "framer-motion";
import { useEffect, useState } from "react";
import Picture, { PictureProps } from "./components/Picture";

export …