vue 过渡组件无法正常工作答案

【问题标题】：vue transition component doesn't work correctlyvue 过渡组件无法正常工作
【发布时间】：2021-03-19 17:41:56
【问题描述】：

你好，这是一个简单的代码，但我不知道有什么问题。当我单击父组件上的打开模式时，模式打开但没有过渡我只是从教程中编写的，在教程中它可以正常工作

<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

【问题讨论】：

它在没有对话框组件的情况下对我有用，也许这就是问题所在？ codesandbox.io/s/brave-volhard-8fntf?file=/src/components/…
@arizzatg 会是错误吗？
检查你的console.log有没有错误？尝试显示其他组件而不是它的工作对话框？如果是这样，问题可能出在对话框中，您可以使用案例制作沙箱

标签： javascript html css vue.js vue-transitions

【解决方案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);
}

【讨论】：