Animate.css在vue中的简易使用

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>

4. 动画效果不能滥用，否则会本末倒置