Animate.css动画库使用

这篇文章是为了记录Animate.css动画库的使用方法和步骤

Animate.css是一个很牛逼的动画库，可以依赖于这个库使用很炫酷的动画效果。
这是Animate.css的官网(https://animate.style/) Tips:初次加载可能会比较缓慢

第一步：安装Animate.css库

首先我们需要安装Animate.css，在控制台输入

npm install animate.css

第二步：引入Animate.css库

在需要使用的文件中输入

import "animate.css"

第三步：使用Animate.css库

在需要使用的元素节点中配置“animate__animated animate__bounce”，而后在官网找到心仪的动画，复制名称添加进目标元素节点对应的动画class属性即可，在vue中的transition标签中展示动画属性名“enter-active-class”，隐藏动画属性名为“leave-active-class”，此处以vue代码为例：

    <transition
      appear
      name="animate__animated animate__bounce"
      enter-active-class="animate__rubberBand"
      leave-active-class="animate__bounceOut"
    >
      <h1 class="H1css" v-show="transitionShow">
        过渡动画条子~~~~~~~~~~~~~~~~~
      </h1>
    </transition>
    <button @click="transitionShow = !transitionShow">显示/隐藏</button>