Animate.css在vue中的简易使用

原创已于 2022-09-03 18:59:12 修改 · 4.2k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2022-04-09 10:16:37 首次发布

本文介绍了如何在Vue项目中安装和使用Animate.css库，通过添加特定类名实现元素的动画效果。示例包括淡入淡出、弹跳等动画，并展示了如何将动画应用于路由视图过渡，提升用户体验。同时提醒注意动画效果的适度使用，避免过度导致反效果。

Animate.css的大致作用：在vue中引入后，可以通过简单的添加类名使元素有生动的效果

1.Animate.css的安装

npm安装

npm install animate.css

在main.js引入和使用

import animate from "animate.css";

2.简单应用

给标签添加类名后便有动画效果

<div class="animate__animated animate__fadeIn">内容部分</div>

注意：

类名中一定要添加“animate__animated”

而“animate__fadeIn”为可替换部分

官网：Animate.css | A cross-browser library of CSS animations.

可替换其他动画（部分，详细请看官网👆）：

弹跳动画：animate__bounce

淡入淡出：animate__fadeIn（淡出则将“In”替换为“Out”）

.........

3.个人觉得比较实用用法

把router-view包装起来，当路由跳转展示出来的页面就会有动画效果，显得不会太生硬

<transition
      enter-active-class="animate__animated animate__lightSpeedInRight"
      leave-active-class="animate__animated animate__lightSpeedOutRight"
    >
      <router-view />
</transition>