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

最新推荐文章于 2025-09-10 06:37:41 发布

原创最新推荐文章于 2025-09-10 06:37:41 发布 · 3.1k 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue

Vue3 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用 animate.css 库实现网页上的动画效果。包括安装步骤、在 Vue 路由中设置过渡动画及在组件中控制动画的示例。通过实际案例展示了动画在页面加载和组件切换时的应用。

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

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

1.2 呈现结果

2 用于组件

2.1 呈现结果

1 条评论

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