總結 我正在尋找一種解決方案來在 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方法，導致動畫發生。