Vue3路由实现过渡动画

Vue3通过路由+animatecss实现过渡动画

安装animatecss

 npm install animate.css --save

router-view增加过渡动画

<template>
  <h1>Router</h1>
  <hr>
  <router-view #default="{route,Component}">
    <transition :enter-active-class="`animate__animated ${route.meta.transition}`">
      <component :is="Component"></component>
    </transition>
  </router-view>
</template>

<script setup lang="ts">
import 'animate.css'
</script>

注意引入animatecss.css