animate.css在vue项目中的使用

官网：https://daneden.github.io/animate.css/?

安装：

 npm install animate.css --save

引入：

 main.js中：

 import animated from 'animate.css' // npm install animate.css --save安装，再引入

 Vue.use(animated)

demo：

 <div class="ty">
     <!-- 直接使用animated中的动画class名，注意：必须加上animated这个class名，否则动画会无效 -->
     <p class="box animated bounceInDown">不积跬步无以至千里</p>
 </div>

 

<template>
  <div>
    <el-button type="primary" @click="handelClick()">点击</el-button>
    <p v-show="isShow" class="animated" :class="animateClass">天生我材必有用</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isPlay: true,
      animateClass: "bounceInDown",
      isShow: true
    };
  },
  methods: {
    handelClick() {
      this.isPlay = !this.isPlay;
      if (this.isPlay) {
        this.animateClass = "bounceInDown";
        this.isShow = true;
      } else {
        this.animateClass = "bounceOutDown";
        setTimeout(() => {
          this.isShow = false;
        }, 500);
      }
    }
  }
};
</script>