我得到了一個模態分量:

<Transition name="fade-modal">
        <div v-if="open" class="overlay-classes-here"
            style="z-index: 99999">
            <div id="modalIndicator" :class="{...'modal-open-class': open }"
                class="modal-classes-here">
                <slot name="modalContent"></slot>
            </div>
        </div>
</Transition>

和下面的CSS:

.fade-modal-enter-active,
.fade-modal-leave-active {
  transition: opacity 0.5s ease;
}

.fade-modal-enter-from,
.fade-modal-leave-to  {
    opacity: 0;
}

.modal-open-class {
  animation: blowUpModal .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

@keyframes blowUpModal {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

利用。我能夠在安裝v-if = & quot；打開& quot。但是很明顯，當卸載組件時，這在相反的情況下是行不通的。有沒有辦法用& lt過渡& gt所以模特離開后會縮水？

如果我理解正確，您可以恢復動畫:

const { ref } = Vue
const app = Vue.createApp({
  setup() {
    const open = ref(false);
    return {
      open
    };
  },
})
app.mount('#demo')

.fade-modal-enter-active,
.fade-modal-leave-active {
  transition: opacity 0.5s ease;
}

.fade-modal-enter-from,
.fade-modal-leave-to  {
    opacity: 0;
}
.fade-modal-leave-to  {
    animation: blowDownModal .5s;
}

.modal-open-class {
  animation: blowUpModal .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

@keyframes blowUpModal {
  0% {
    transform:scale(0);
  }
  100% {
    transform:scale(1);
  }
}
@keyframes blowDownModal {
  0% {
    transform:scale(1);
  }
  100% {
    transform:scale(0);
  }
}

<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.prod.js"></script>
<div id="demo">
  <button @click="open = !open">toggle</button>
  <Transition name="fade-modal">
    <div v-if="open" class="overlay-classes-here" style="z-index: 99999">
        <div id="modalIndicator" :class="{'modal-open-class': open }"
            class="modal-classes-here">
            <slot name="modalContent"><h1>some content</h1></slot>
        </div>
    </div>
  </Transition>
</div>