Animate.css动画库使用

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

Animate.css是一个很牛逼的动画库，可以依赖于这个库使用很炫酷的动画效果。
这是Animate.css的官网(https://animate.style/)

第一步：安装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代码为例：

    
      

        过渡动画条子~~~~~~~~~~~~~~~~~
      
    
    显示/隐藏