總結(jié) 我正在尋找一種解決方案來在 Vue 中跨兩個(gè)不同的路由器視圖創(chuàng)建動(dòng)畫。我遇到的問題是，當(dāng)瀏覽器切換到另一個(gè)路由器視圖時(shí)，它會(huì)重新渲染頁面。所以當(dāng)瀏覽器重新渲染時(shí)動(dòng)畫就會(huì)消失。動(dòng)畫基本上，該應(yīng)用程序有兩個(gè)不同的頁面：homepage和aboutpage。當(dāng)用戶單擊藍(lán)色菜單按鈕時(shí)，綠色導(dǎo)航菜單將從左向右滑動(dòng)，直到覆蓋整個(gè)屏幕。該菜單有兩個(gè)鏈接：about和home。如果用戶單擊“關(guān)于”，白色覆蓋層將從左側(cè)移動(dòng)并覆蓋整個(gè)屏幕，然后移動(dòng)到右側(cè)并消失。關(guān)于頁面消失后顯示。這是codepen示例，演示了我想要實(shí)現(xiàn)的動(dòng)畫效果（該演示沒有使用路由器）。 https://codepen.io/wl1664209734/pen/qBamXEL下面是在codepen中的vue模板中重新創(chuàng)建動(dòng)畫的代碼我的代碼的解釋這里是codeSandbox鏈接，我在這個(gè)沙箱中重現(xiàn)了問題，我認(rèn)為這將幫助人們更好地理解我的問題。 https://codesandbox.io/s/vue-page-shift-anime-yp1yf在這個(gè)沙箱中，我使用了 vue 模板。它包括一個(gè)主要組件：App.vue和 5 個(gè)其他組件：Homepage.vue、Aboutpage.vue、Background.vue、Navbar.vue、Navigation.vue。背景包含導(dǎo)航欄和導(dǎo)航以形成應(yīng)用程序的靜態(tài)元素。主頁和關(guān)于頁面都有背景和獨(dú)特的標(biāo)題。Homepage的標(biāo)題是 HOME，Aboutpage的標(biāo)題是 ABOUT。然后，我在 main.js 中配置路由器，并將 router-view 標(biāo)簽放入 App.vue中。我還將路由器鏈接添加到Navigation.vue。我向 router-link 添加了一個(gè)點(diǎn)擊事件（頁面移位），該事件被發(fā)送到Background.vue。因此，當(dāng)用戶單擊鏈接時(shí)，它將調(diào)用 Background.vue中的pageShift方法，導(dǎo)致動(dòng)畫發(fā)生。