vue3当中使用animate.style动画库

介绍

animation.style是一个动画库，里面有很多的动画效果。只需要复制类名即可使用，非常的方便简单高效。不过需要触发条件，v-if、v-show、以及当页面第一次渲染的时候会触发。

官网地址

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

使用

1. 首先下载插件

 npm install animate.css --save

2. 在main.js中引入animation.style动画库

//引入animation.style动画库
import 'animate.css/animate.min.css'

3.在页面当中使用

<template>
  <transition-group
    appear
    name="animate__animated animate__bounce"
    enter-active-class="animate__fadeInUp"
    leave-active-class="animate__fadeOutLeft"
  >
    <div key="1" v-if="flag">123</div>
  </transition-group>
  <button @click="handle">开关</button>
</template>

enter-active-class：这个是控制进入动画，后面是动画类名

leave-active-class：这个是控制离开动画，后面是动画类名

注意这个地方的key是给dom节点的唯一标识不可省略省略的话动画无效