Vue.js Vue嵌套转换不'；I don’我没有按预期工作

我有下面的页面，其中有两个父组件包装在transition标记中。他们之间的过渡很顺利

Page.vue包含两个组件：撤回请求和撤回确认

<template>
  <v-container>
    <div class="mx-2 mt-8">
      <v-row>
        <transition name="fade" mode="out-in">
          <withdrawal-form
            @withdrawal-request="setWithdrawalRequest"
            v-if="!withdrawalRequest"
          ></withdrawal-form>
          <withdrawal-confirm
            v-else
            :withdrawal-request="withdrawalRequest"
          ></withdrawal-confirm>
        </transition>
      </v-row>
    </div>
  </v-container>
</template>

子组件取款确认也有2个v卡包装在转换中。

这是一个简单的exmaple，但它也不起作用。我真的不明白为什么第二个过渡根本不起作用。我遗漏了什么吗？我已经花了几个小时进行测试

<template>
  <div>
    <transition name="fade" appear>
      <v-card v-if="show">Card1</v-card>
      <v-card v-else>Card2</v-card>
    </transition>
    <v-btn @click="toggle">Toggle</v-btn>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    },
  },
};
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

卡片1
卡片2
切换
导出默认值{
数据（）{
返回{
秀：没错，
};
},
方法：{
切换（）{
this.show=！this.show；
},
},
};
.淡入激活状态，
.淡入淡出激活状态{
过渡：不透明度0.5s；
}
.淡入，
.淡出{
不透明度：0；
}

您可以使用v-if/v-else在原始元素之间转换。最常见的两个元素转换之一是列表容器和描述空列表的消息之间的转换：

但是：

在具有相同标记名的元素之间切换时，必须通过赋予它们唯一的键属性来告诉Vue它们是不同的元素。否则，Vue的编译器将仅为提高效率而替换元素的内容。即使在技术上不必要的情况下，在一个组件中始终为多个项目设置关键帧也是一种良好的做法

例如：

newvue({
el:“应用程序”，
数据：{
秀：真的
}
})

。淡入激活状态{
过渡：不透明度1.5s；
}
.淡入，
.淡出{
不透明度：0；
}

切换
卡片1
卡片2

这很有道理，我刚刚尝试过，但仍然不起作用。可能还有其他原因？我在你的代码中构建了一个示例，我刚刚修复了你的css代码，看看这个。嘿，它对你有用吗？