关于vue.js:Animatecss动画库使用

这篇文章是为了记录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>