vue动画 使用animate实现动画

第一步：下载依赖

npm install animate.css --save

第二步：script中引入

import animate from "animate.css";

第三步：使用
完整代码：

<template>
  <div class="hello">
    <input type="button" value="button" @click="flag=!flag" />
    <transition enter-active-class="**animated** bounceIn" leave-active-class="**animated** bounceOut" :duration="200">//duration调节速度
      <h1 v-if="flag">这是一个自定义v-前缀的动画</h1>
    </transition>
  </div>
</template>

<script>
  import animate from "animate.css";
  export default {
    name: "HelloWorld",
    data() {
      return { flag: false };
    },
    mounted() {}
  };
</script>

<style scoped>
</style>

有些人不用加animated也能用 视自己情况而定
附上官网：https://daneden.github.io/animate.css/