VUE transition标签结合animate的运用

<template>
  <div style="height:100vh">
     <button @click="show = !show">打开</button>
    <!-- 弹窗右切效果 -->
    <transition name="fade">
        <div v-show="show" style="width: 100%;height:100%;background-color: #ff0000;"></div>
    </transition>
    
  </div>
</template>

<script>
export default {
  data(){
      return{
          show:false
      }
  }
};
</script>

<style>
.fade-enter-active{
    animation-name:fadeInRight;animation-duration:.5s;
}
.fade-leave-active{
    animation-name:fadeOutRight;animation-duration:.5s;
}
</style>