vue中使用animate.css进行路由切换

最新推荐文章于 2023-04-15 15:13:34 发布

明天又会在哪里

最新推荐文章于 2023-04-15 15:13:34 发布

阅读量1.9k

点赞数

分类专栏： Vue学习文章标签： vue animate.css

本文链接：https://blog.youkuaiyun.com/xuefeng11111/article/details/88555890

版权

Vue学习专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍如何在Vue项目中引入并使用animate.css库，实现页面间的过渡动画效果。通过具体代码示例，展示了如何配置动画模式、进入和离开动画类，以及与Vue-router和keep-alive组件结合使用的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

animate.css的动画方案丰富无比，足以满足我们的需要，今天将一下animate.css在vue中的使用方法记录一下，以免下次再使用又得上网上找半天，嘎嘎…
参考博客 Vue.js - Transition过渡动画的使用6（配合vue-router、vue-navigation使用）

首先我们先进行安装

$ npm i -S animate.css

在main.js中进行引入

import 'animate.css'

使用

<transition mode="out-in" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
  <keep-alive>
    <router-view />
  </keep-alive>
</transition>