vue transition 和 animate.css同时使用

// https://www.dowebok.com/98.html animate.css下载链接
<template>
  <div>
    <p>vue 同时使用transition 和 animate.css</p>
    <button @click="change"> 触发动画</button>
    <!-- 自定义name 以及使用animated.css,添加apper实现页面刷新第一次触发动画
    type="transition" 定义以transition时长为准 animated默认时长1s
    -->
    <transition
    name='fade'
    :duration="{enter:5000,leave:10000}"
    appear
    enter-active-class="animated swing fade-enter-active" 
    leave-active-class="animated shake fade-leave-active"
    apper-active-class = "animated swing"
    >
    
      <div class="div" v-if="show">
        hello 
      </div>
    </transition>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      show: true,
    }
  },
  methods: {
    change() {
      this.show = !this.show
    }
  },
  components: {
  }
}
</script>

<style lang="scss">

.div {
  width: 200px;
  height: 200px;
  background-color: pink;
  &.fade-enter ,.fade-leave-to{
    opacity: 0;
  }
  &.fade-enter-active,.fade-leave-active{
    transition: opacity 10s;
  }
}
</style>