Nextjs中下一页之前的页面转换

Question

有没有办法归档符合以下要求的页面过渡：

• 我想在页面更改时显示页面转换
• 页面转换应该在下一个页面加载/显示之前完成
• 页面转换应该运行 X 秒
• 页面过渡是放置在 _app.js

目前，我以一种可怕的方式做到这一点。在 NuxtJS 中，可以通过 Javascript Hooks 将其存档。https://nuxtjs.org/docs/2.x/components-glossary/pages-transition

感谢您的帮助 ：）

Answer 1

您可以挂钩 Next.js Router 事件，但无法设置转换需要多长时间。

例如，如果您希望过渡时间为 3 秒：

• 如果 Next.js 转换需要 1 秒，您可以等待 2 秒，但是
• 如果 Next.js 转换需要 4 秒，您将无能为力。

而且您无法确定 Next.js 过渡需要多长时间。

自定义“路由”

无论如何，如果您依赖的 Next.js 转换永远不会比动画花费更多时间，那么您将必须以某种方式“存储”旧页面视图，并在动画运行时显示它而不是新页面。

从 Next.js 的角度来看，应该显示新页面。我认为这不适用于 Next.js 路由，我猜你必须自己进行“路由”（根据 url 显示内容）。例如，将您的应用程序设计为始终同时具有两个页面，一个显示，一个隐藏，并且可能正在加载。然后您可以随时在这两个页面之间切换。

您可能想看看实验性功能React“Suspense”（我不知道，我没有使用过它）。

路由前等待

如果您想在转换开始之前等待一段时间，您可以执行以下操作：

const startAnimation = () => {
    return new Promise( ( resolve, reject ) => {
        console.log('...animate...');
        
        setTimeout( resolve, 3000 ); // <-- replace this line with your animation, and call resolve() when finished
    } );
};

const routerWrapper = {
    push: ( url ) => {
        startAnimation().then( () => {
            console.log('Next.js routing starts...');
            Router.push( url );
        })
    }
};

// ...

routerWrapper.push( newUrl ); // <-- this instead of Router.push( newUrl )

路由完成时停止动画

如果您想在调用时启动动画Route.push()，并在 Next.js 转换完成时停止动画，您可以使用Next.js routerevents，例如：

export default function App( props: AppProps ) {
    const { Component, pageProps } = props;
    const router = useRouter()

    useEffect(() => {
        const routeChangeStart = (url, { shallow }) => {
            console.log('start animation');
        };

        const routeChangeComplete = (url, { shallow }) => {
            console.log('stop animation');
        };

        router.events.on('routeChangeStart', routeChangeStart);
        router.events.on('routeChangeComplete', routeChangeComplete);

        return () => {
            router.events.off('routeChangeStart', routeChangeStart);
            router.events.off('routeChangeComplete', routeChangeComplete);
        }
    }, [])

    // --
    return (
        <Component { ...pageProps } />
    );
}