vue3快速实现简单的路由动画

1.

npm install animate.css

2.全局引入    main.ts

import 'animate.css/animate.min.css' //引入动画

3.使用

<router-view v-slot="{ Component }">
    <transition name="ranimate">
      <component :is="Component" />
    </transition>
  </router-view>

4.css动画

.ranimate-enter-active {
  animation: slideInLeft 1s;
}

.ranimate-leave-active {
  animation: slideOutLeft 0.5s;
}