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

Question

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

我想在页面更改时显示页面转换

页面转换应该在下一页加载/显示之前完成

页面转换应该运行 X 秒

页面过渡是放置在_app.js中的一个组件

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

Answer 1

您可以 Hook Next.js 路由器事件，但您无法设置转换需要多长时间。
例如。如果您希望过渡为 3 秒:

如果 Next.js 转换需要 1 秒，您可以等待 2 秒，但是

如果 Next.js 转换需要 4 秒，您将无能为力。

而且您无法确定 Next.js 转换需要多长时间。
自定义“路由”
无论如何，如果你依赖 Next.js 转换永远不会比你的动画花费更多的时间，你将不得不以某种方式“存储”旧页面 View ，并在动画运行时显示它而不是新页面。
从 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 } />
    );
}