Vue3 路由页面切换动画 animate.css

animate.css官网

可以通过以下的内容，来获取自己想要的动态切换样式

1 路由动画transition或者在组件中控制使用animate

• 安装

npm install animate.css

• 在main.ts中引入

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

• 使用

在需要切换路由的页面中添加如下内容

html

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

css

.router_animate-enter-active {
    animation: slideInLeft 0.5s;
}
.router_animate-leave-active {
    animation: slideOutLeft 0.3s;
}

1.2 呈现结果

2 用于组件

控制类名是否加在元素上，值得注意的是，元素前面要加上animate__animated的前缀，下图：控制是否显示animate__bounce这个动画，flipinIn为true的时候

const flipinIn = ref(false); 

<el-button type="primary" @click=" flipinIn= true">animate.css实现</el-button>
<h1 class="animate__animated" :class="{animate__bounce:flipinIn}">动画文字</h1>

2.1 呈现结果