vue.js - 我的 Vue 模态有效，但未应用过渡样式

Question

我的模态有效，但没有一个过渡 css（如下所示）有效。所有样式都会立即消失并重新出现。这与在另一个组件中使用它有关吗？

我还注意到，当使用 v-show 时，我的模态总是显示。我必须将其更改为 v-if 才能使其按预期工作。

搜索模式.vue：

<template>
  <transition name="fade">
    <div class="modal-overlay" 
         @click="close()"></div>
  </transition>
  <transition name="pop">
    <div class="modal" 
         role="dialog" 
         >
      <p>some text</p>
      <button @click="close()" class="button">Hide Modal</button>
    </div>
  </transition>
</template>

<script>
  export default {
    name: 'SearchModal',
    methods: {
      close() {
        this.$emit('close');
      },
    },
  };
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s linear;
}

/* only showing relevant transition styles */
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.pop-enter-active,
.pop-leave-active {
  transition: transform 1s cubic-bezier(0.5, 0, 0.5, 1), opacity 1s linear;
}

.pop-enter,
.pop-leave-to {
  opacity: 0;
  transform: scale(0.3) translateY(-50%);
}
</style>

TopNav.vue：

<template>
     <span @click="showModal">Search</span>

     <SearchModal
      v-if="isModalVisible"
      @close="closeModal"
    />
</template>

<script>
import SearchModal from './SearchModal.vue';

export default {
    name: 'TopNav',
    components: {
    SearchModal
  },
  data() {
      return {
        isModalVisible: false,
      };
    },
    methods: {
      showModal() {
        this.isModalVisible = true;
      },
      closeModal() {
        this.isModalVisible = false;
      }
    }
}
</script>