Vue的transition過渡效果

為了實現過渡的效果，如圖：

 

 主要用到Vue 的 transition:

DOM結構部分：

<transition name="fade">
      <div class="detail" v-show="showDetail" @click="closeDetail"></div>
</transition>

樣式部分：

.fade-enter-active,
  .fade-leave-active {
    // opacity: 1;
    // background: rgba(7, 17, 27, 0.8);
    transition: all 0.6s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
  .detail {
    @include full_background();
    z-index: 11;
    backdrop-filter: blur(10px);
    background: rgba(7, 17, 27, 0.8);
  }