Vue.js 中不同路由器视图之间无法发生动画

Question

总结 我正在寻找一种解决方案来在 Vue 中跨两个不同的路由器视图创建动画。我遇到的问题是，当浏览器切换到另一个路由器视图时，它会重新渲染页面。所以当浏览器重新渲染时动画就会消失。动画基本上，该应用程序有两个不同的页面：homepage和aboutpage。当用户单击蓝色菜单按钮时，绿色导航菜单将从左向右滑动，直到覆盖整个屏幕。该菜单有两个链接：about和home。如果用户单击“关于”，白色覆盖层将从左侧移动并覆盖整个屏幕，然后移动到右侧并消失。关于页面消失后显示。这是codepen示例，演示了我想要实现的动画效果（该演示没有使用路由器）。 https://codepen.io/wl1664209734/pen/qBamXEL下面是在codepen中的vue模板中重新创建动画的代码我的代码的解释这里是codeSandbox链接，我在这个沙箱中重现了问题，我认为这将帮助人们更好地理解我的问题。 https://codesandbox.io/s/vue-page-shift-anime-yp1yf在这个沙箱中，我使用了 vue 模板。它包括一个主要组件：App.vue和 5 个其他组件：Homepage.vue、Aboutpage.vue、Background.vue、Navbar.vue、Navigation.vue。背景包含导航栏和导航以形成应用程序的静态元素。主页和关于页面都有背景和独特的标题。Homepage的标题是 HOME，Aboutpage的标题是 ABOUT。然后，我在 main.js 中配置路由器，并将 router-view 标签放入 App.vue中。我还将路由器链接添加到Navigation.vue。我向 router-link 添加了一个点击事件（页面移位），该事件被发送到Background.vue。因此，当用户单击链接时，它将调用 Background.vue中的pageShift方法，导致动画发生。

Answer 1

问题是您通过Background.vue. 不要那样做。将其包含在App.vue.

当路由更改时，<router-view />的内容将填充该路由组件的全新实例（在(或) 中的routes数组中设置）。所以，而不是：router/index.ts.js

<template>

  <div id="app">

    <router-view></router-view>

  </div>

</template>

...你App.vue应该包含：

<template>

  <div id="app">

    <navigation />

    <router-view />

  </div>

</template>

如果您不想在页面更改时重新呈现页面的任何其他部分（某些侧边栏，可能是页脚），也请将它们包含在App.vue. 因此，使用页脚和侧边栏，它可能看起来像：

<template>

  <div id="app">

    <header>

      <navigation />

    </header>

    <main>

      <sidebar />

      <router-view />

    </main>

    <footer />

  </div>

</template>

当路线更改时，只会<router-view />重新渲染，并相应地执行路线上设置的动画。直接放置的其他布局元素App.vue将不会重新渲染。显然，如果您根据当前路由动态更改它们的内容，这些部分将会更新，但它们的基本 DOM 元素将保持不变。

隐含地，您应该<navigation />从您的视图中删除以及您决定直接放入的任何其他内容App.vue。