Vue2 Transition Mode not working

Question

The following is the code of my .vue. swapping between div worked just fine and the transition fade works well too. but mode out-in not working at all. both elements were shown at the same time while transitioning.

EDIT##

Sorry that I am not familiar with fiddle. Please find the full code of my .vue below for your best reference.

<template>
    <div>
    <div class="col-md-3">
      <namecard :shop="shop" :owner="user"></namecard>
    </div>

    <div class="col-md-9">
      <div>
        <ul class="nav nav-tabs shop-manage-tabs">
          <li class="nav-item">
            <a class="nav-link" :class="isActive == 'items' ? 'active' :''" @click.prevent="activateTab('items')">Items</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" :class="isActive == 'operaters' ? 'active' : ''" @click.prevent="activateTab('operaters')">Operaters</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" :class="isActive == 'info' ? 'active' : ''" @click.prevent="activateTab('info')">Info</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" :class="isActive == 'statistics' ? 'active' : ''">Statistics</a>
            <div class="dropdown-menu">
              <a class="dropdown-item" @click.prevent="activateTab('statistics')">Action</a>
              <a class="dropdown-item" @click.prevent="activateTab('statistics')">Another action</a>
              <a class="dropdown-item" @click.prevent="activateTab('statistics')">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" @click.prevent="activateTab('statistics')">Separated link</a>
            </div>
          </li>
        </ul>
      </div>

      <transition-group name="fade" mode="out-in">

        <div v-if="isActive == 'items'" key="items">
          <div class="card" style="padding: 1rem">
          <h1>Control Panel</h1>
            <button type="button" class="btn btn-success" @click="addNewProduct = true">Add New Product</button>
            <button type="button" class="btn btn-danger" @click="addNewProduct = true">Delete Product</button>
          </div>
          <add-new-product v-show="addNewProduct"></add-new-product>
          <div class="card" style="padding: 1rem">
            <item-card :productId="product.id" v-for="product in shop.products" :key="product"></item-card>
          </div>
        </div>

        <div v-else-if="isActive == 'operaters'" key="operaters">
          <div class="card" style="padding: 1rem">
          <h1>Control Panel</h1>
            <button type="button" class="btn btn-success" @click="addNewProductModal = true">Add Operator</button>
            <button type="button" class="btn btn-danger" @click="addNewProductModal = true">Delete Operator</button>
          </div>
          <div class="card">operaters</div>
        </div>

        <div v-else-if="isActive == 'info'" class="card" key="info">
          <div class="card">info</div>
        </div>

        <div v-else-if="isActive == 'statistics'" class="card" key="statistics">
          <div class="card">statistics</div>
        </div>

      </transition-group>

    </div>


    </div>

</template>

<script>
  import itemCard from './Item-card.vue'
  import nameCard from '../Namecard.vue'
  import addNewProduct from './Add-new-product.vue'
  export default {
    components:{
      'item-card':itemCard,
      'namecard':nameCard,
      'add-new-product':addNewProduct,
    },
    data(){
      return{
        user:{},
        shop:{},
        isActive:'items',
        addNewProduct:false,
      }
    },
    props:[
    ],
    created(){
      this.getUserInfo()
    },
    mounted(){
    },
    methods:{
      getUserInfo(){
        var vm = this
        vm.$http.get('/getAuthUser').then((response)=>{
          vm.user = response.data
          vm.$http.get('/getShop/'+vm.user.id).then((response)=>{
            vm.shop = response.data.data.shop
          })
        })
      },
      activateTab(tab){
        var vm = this
        vm.isActive = tab
      }
    }
  }
</script>

Answer 1

You need to give key attribute to each of the div to make the transition work smoothly. In your case I see an extra ', which might be an issue, try removing that.

Change

<div v-if="isActive == 'items'" key="'items'">

to

<div v-if="isActive == 'items'" key="items">

and similarly at other places as well.