vue中使用animate.css

说明：本文章所用到的版本为 “animate.css”: “4.1.1”

1、下载

cnpm install animate.css --save

2、main.js中引用

import animate from 'animate.css'
Vue.use(animate)

3、使用

方法一：html标签内直接使用

<h1 class="animate__animated animate__bounce animate__delay-5s">{{ msg }}</h1>

方法二：点击事件内，js控制使用

<h1 :class="{'animate__animated':showAnimation, 'animate__bounce':showAnimation}" @click="clickAnimation">{{ msg }}</h1>


  methods: {
    clickAnimation () { // animate__animated animate__bounce animate__delay-2s
      this.showAnimation = true
      setTimeout(() => {
        this.showAnimation = false
        console.log('动画初始成功')
      }, 2000)
    }
  }