animate.css在vue项目中的使用

<template>
  <div class="content">
    1.你要先下载：animate.css
    npm方式：npm install animate.css --save

    2.下载成功后来到main.js中
    import animated from 'animate.css'
    Vue.use(animated)

    3.现在你就可以在模板中去使用了
    <div @click="clickData">
      点击我
    </div>

    <!--  enter-active-class:进入  -->
    <!--  leave-active-class:离开  -->
    <!--  duration:显性的过渡持续时间     vue官方了解地址：  https://cn.vuejs.org/v2/guide/transitions.html#%E6%98%BE%E6%80%A7%E7%9A%84%E8%BF%87%E6%B8%A1%E6%8C%81%E7%BB%AD%E6%97%B6%E9%97%B4-->
    <!--    写法1 -->
    <transition enter-active-class="animated rubberBand" leave-active-class="animated bounceInRight">
      <h1 v-if="result">动画效果：体现enter-active-class 和 leave-active-class</h1>
    </transition>

    <!--    写法2 -->
    <transition enter-active-class="rubberBand" leave-active-class="bounceInRight">
      <h1 v-if="result" class="animated">动画效果：体现enter-active-class 和 leave-active-class</h1>
    </transition>

    <!--    使用: :duration="毫秒值" 来统一设置 入场 和 离场 时候的动画时长-->
    <transition enter-active-class="rubberBand" leave-active-class="bounceInRight" :duration="1000">
      <h1 v-if="result" class="animated">动画效果：体现duration</h1>
    </transition>

    <!--    使用: :duration="{enter 400, leave: 2000}" 来分别设置 入场 和 离场 时候的动画时长-->
    <transition enter-active-class="rubberBand" leave-active-class="bounceInRight" :duration="{enter:400,leave:2000}">
      <h1 v-if="result" class="animated">动画效果：体现duration分别设置 入场 和 离场 时候的动画时长</h1>
    </transition>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        result: false
      }
    },
    methods: {
      clickData() {
        this.result = !this.result
      }
    }
  }
</script>


<style scoped>

</style>

animate.css官方地址（效果查看）：https://daneden.github.io/animate.css/