这里我使用了一种页面动画库animate.css

这里我附上它的链接

Animate.css | A cross-browser library of CSS animations.

我使用的是Vue3

//App.vue代码如下
<router-view v-slot="{ Component, route }"><transition@before-enter="beforeEnter"@enter-active="enterActive"@leave-active="leaveActive"mode="out-in"><component :is="Component" :key="route.path" /></transition></router-view><script setup>
import 'animate.css'
import { useRoute } from 'vue-router'
const route = useRoute()
// 页面进入前的钩子函数
const beforeEnter = (el) => {// 在元素上添加 animate.css 的类名，使其具有进入动画效果el.classList.add('animate__animated', 'animate__fadeInLeft')
}// 页面进入时的钩子函数
const enterActive = (el) => {// 当进入动画开始时，移除 'animate__fadeInLeft' 类名// 这样可以确保元素在进入时应用动画效果，而不会重复添加el.classList.remove('animate__fadeInLeft')
}// 页面离开时的钩子函数
const leaveActive = (el) => {// 在元素上添加 animate.css 的类名，使其具有离开动画效果el.classList.add('animate__animated', 'animate__fadeOutRight')// 当动画结束时，移除添加的动画类名el.addEventListener('animationend', () => {el.classList.remove('animate__animated', 'animate__fadeOutRight')}, { once: true }) // 只监听一次动画结束事件
}
</script>