vue中使用animate.css

在Vue中使用animate.css，首先需要安装animate.css：

npm install animate.css --save

然后在Vue组件中引入并使用：

<template>
  <div>
    <button @click="animate">点击我</button>
    <div :class="{'animate__animated': animateClass, 'animate__bounce': animateClass}">
      这是要动画的元素
    </div>
  </div>
</template>
 
<script>
import 'animate.css';
 
export default {
  data() {
    return {
      animateClass: false
    };
  },
  methods: {
    animate() {
      this.animateClass = true;
      setTimeout(() => {
        this.animateClass = false;
      }, 1000);
    }
  }
};
</script>

在上面的例子中，我们在Vue组件中引入了animate.css，并定义了一个方法animate来切换动画类名animateClass。当按钮被点击时，会给带有动画效果的元素添加一个名为animate__animated和animate__bounce的类，这会触发动画效果。动画完成后，通过setTimeout将类名移除，以停止动画。