Vue nested transition doesn't work as expected

Question

I have the following page with 2 parent components wrapped in transition tag. The transition between them works smoothly.

Page.vue with 2 components: WithdrawalRequest and 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>

The child component WithdrawalConfirm also has 2 v-cards wrapped in transition.

This is a simple exmaple but it doesn't work either. I don't really understand why the second transition doesn't work at all. Am I missing anything? I have already spent several hours on testing.

<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

You can transition between raw elements using v-if/v-else. One of the most common two-element transitions is between a list container and a message describing an empty list:

But:

When toggling between elements that have the same tag name, you must tell Vue that they are distinct elements by giving them unique key attributes. Otherwise, Vue’s compiler will only replace the content of the element for efficiency. Even when technically unnecessary though, it’s considered good practice to always key multiple items within a component.

For example: 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/[email protected]/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>

More info here https://v2.vuejs.org/v2/guide/transitions.html#Transitioning-Between-Elements