Vue3 路由页面切换动画 animate.css效果
作者：月下脆竹書閣
这篇文章主要介绍了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 呈现结果
到此这篇关于Vue3 路由页面切换动画 animate.css效果的文章就介绍到这了,更多相关Vue3 路由页面切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！