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

是否有任何方法可以归档符合以下要求的页面转换：

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

  \u app.js

目前，我做这件事的方式很可怕。 在NuxtJS中，可以通过Javascript挂钩对其进行归档

---

谢谢你的帮助：）

我还没有亲自做过这件事，但看起来你可以通过帧动来做类似的事情

在主应用程序组件中从路由器解构道具

function App({ Component, pageProps, router }) {

<motion.div key={router.route}>

然后，可以使用帧运动中的AnimatePresence组件来设置管线加载和退出的动画。您在评论中说您熟悉库，所以我不会谈论该组件，但这里是您在AnimatePresence组件中添加到motion.div的内容

function App({ Component, pageProps, router }) {

<motion.div key={router.route}>

下面我将链接一篇关于如何做到这一点的好文章，并以一个好的回购协议为例。我没有写这两篇文章，但它们都非常有用，而且是描述性的

---

您可以挂接Next.js路由器事件，但无法设置转换所需的时间

例如，如果您希望转换时间为3秒：

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

您无法确定下一个.js转换需要多长时间

自定义“路由” 无论如何，如果您依赖于Next.js转换，它所花费的时间永远不会超过您的动画，那么您必须以某种方式“存储”旧页面视图，并在动画运行时显示它而不是新页面

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

您可能想看看实验功能（我不知道，我还没有用过）

路由前等待 如果要在转换开始前等待一段时间，可以执行以下操作：

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 )

---

与Nuxt.js一样，Next.js没有内置的简单方法来实现这一点。您可以查看有助于实现此目的的外部库，例如，和）。这与动画本身无关。我两个都认识。更重要的是路由的处理。然后可以在进入下一页之前运行动画。目前，我使用一个链接组件来运行动画，然后推送新路线。我只是想知道是否有像nuxt这样的好方法。谢谢：）那样的话，也许值得一看。甚至可以在

\u app

中听这些。我听了，但没有符合我要求的活动，或者我没有正确使用它。在进入新页面之前，必须准备好转换。在

routeChangeStart

的情况下，您可以看到内容在动画运行时发生了变化。