Vue3页面进入动画

这里我使用了一种页面动画库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>