vue 過渡組件無法正常工作

Question

你好這是一個簡單的代碼，但我不知道是什么問題。 當我單擊父組件上的打開模式時，模式打開但沒有過渡，我只是從教程中編寫它，在教程中它可以正常工作

<template>
  <div class="backdrop" @click="$emit('close')" v-if="open"></div>
  <transition name="modal" mode="out-in">
    <dialog open v-if="open">
      <slot></slot>
    </dialog>
  </transition>


</template>

<script>
export default {
  emits: ['close'],
  props:['open']
};
</script>

<style scoped>



.modal-enter-active{
  animation: modal 2s linear;
}
.modal-leave-active{
  animation: modal 2s linear;
}

@keyframes modal {
  from{
    opacity: 0;
    transform:translateY(-150px) scale(0)
  }

  to{
    opacity: 1;
    transform:translateY(0) scale(1)
  }

}
</style>

我正在使用 vue 3

Answer 1

你真的需要使用 CSS 動畫嗎？

使用簡單的轉換怎么樣？

.modal-enter-active, .modal-leave-active {
  transition: 2s;
  transition-timing-function: linear;
}
.modal-enter, .modal-leave-to {
  opacity: 0;
  transform:translateY(-150px) scale(0);
}