javascript - 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);
}