vue-animate-css 使用

Vue-Animate-CSS 是一个 Vue.js 的插件，它可以让你很容易地在 Vue.js 应用中使用 Animate.css 动画库。

要使用 Vue-Animate-CSS，首先需要安装它。你可以通过 npm 安装：

npm install vue-animate-css --save

安装完成后，将其添加到你的 Vue.js 应用中。在 main.js 文件中添加以下代码：

import Vue from 'vue'
import VueAnimateCss from 'vue-animate-css'

Vue.use(VueAnimateCss)

现在，你可以在 Vue.js 组件中使用 Vue-Animate-CSS 了。假设你想要为某个元素添加 Animate.css 中的 "bounce" 动画，你可以这样写：

<template>
  <div class="animated bounce">
    Hello World!
  </div>
</template>

这里的 "animated" 是 Animate.css 中定义的一个 CSS 类，它可以让元素使用 Animate.css 中的动画。而 "bounce" 则是 Animate.css 中的一个动画类，它可以让元素跳动。

你也可以将动画绑定到 Vue.js 的过渡效果中，比如在元素显示和隐藏时使用不同的动画。下面是一个例子：

<transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
  <div v-if="show">
    Hello World!
  </div>
</transition>

这里我们使用了 Vue.js 的过渡效果，并将 "enter-active-class" 和 "leave-active-class" 属性设置为 Animate.css 中的 "bounceInLeft" 和 "bounceOutRight" 动画类。当元素显示时，它会从左侧弹出；当元素隐藏时，它会向右侧弹出。

以上就是使用 Vue-Animate-CSS 的基本方法。你可以在其官网上查看更多使用方法和示例：https://github.com/asika32764/vue-animate-css