vue使用animate.css

1.在main.js中引入animate.css

import './assets/animate.css'

2.使用transition標簽包裹運動的元素,使用enter-active-class定義進入動畫，使用leave-active-class定義離開動畫，注意animate.css的所有動畫要加animated這個類

   <transition enter-active-class="animated bounce" leave-active-class="animated hinge">
        <div class="box" v-show="show"></div>
    </transition>

例子：

<template>
<div>
    <transition enter-active-class="animated bounce" leave-active-class="animated hinge">
        <div class="box" v-show="show"></div>
    </transition>
    <button @click="toggle()">切換</button>
</div>
</template>
<script>
export default {
  name: "Home",
  data () {
    return {
        show:true
    };
  },
  methods:{
      toggle(){
          this.show = !this.show
      }
  }
}
</script>
<style lang="css" scoped>
.box{
    width: 300px;
    height: 300px;
    background-color: red;
    margin: 0 auto;
}
</style>