vue使用transition组件动画效果

<template>
  <div>
    <button @click="show = !show">
      Toggle
    </button>
    <transition name="fadeBg">
      <div class="bg" v-if="show">hello</div>
    </transition>
  </div>
</template>

<script>
  export default {
    data: () => ({
      show: true
    }),
  };
</script>

<style lang="less" scoped>
  .fadeBg-enter-active,
  .fadeBg-leave-active {
    transition: opacity 0.3s ease;
  }

  .fadeBg-enter,
  .fadeBg-leave-to {
    opacity: 0;
  }

  .bg {
    position: fixed;
    top: 20px;
    left: 0;
    z-index: 105;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
</style>