关于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>