Vue 嵌套过渡无法按预期工作

Question

我有以下页面，其中包含 2 个包含在转换标记中的父组件。他们之间的过渡很顺利。

Page.vue 有 2 个组件：WithdrawalRequest 和 WithdrawalConfirm

<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>

子组件 WithdrawalConfirm 也有 2 个包装在转换中的 v-cards。

这是一个简单的例子，但它也不起作用。我真的不明白为什么第二次转换根本不起作用。我错过了什么吗？我已经花了好几个小时来测试了。

<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>

Answer 1

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

但是：

在具有相同标签名称的元素之间切换时，您必须通过为它们提供唯一的键属性来告诉 Vue 它们是不同的元素。否则，Vue 的编译器为了效率只会替换元素的内容。即使在技术上没有必要，始终在一个组件中键入多个项目也被认为是一种很好的做法。

例如： https://jsfiddle.net/softvini/69ob4apu/17/

new Vue({
 el:"#app",
 data:{
  show: true
 }
})

.fade-enter-active{
  transition: opacity 1.5s;
}
   
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
  <button v-on:click="show = !show">
    Toggle
  </button>
   <transition name="fade" appear>
       <span key="card1" v-if="show">Card1</span>
       <span key="card2" v-else>Card2</span>
    </transition>
 </div>

这里有更多信息https://vuejs.org/v2/guide/transitions.html#Transitioning-Between-Elements

Vue 嵌套过渡无法按预期工作

Vue nested transition doesn't work as expected

vue.js

vuetify.js

vue-transitions