Vue2遷移モードが動作しない

Question

以下は私の.vueのコードです。 div間のスワップは正常に機能し、transitionfadeもうまくいきます。 modeout-inはまったく動作しません。遷移中に両方の要素が同時に表示されました。

EDIT ##私はバイオリンに慣れていないだと

申し訳ありません。あなたの最高の参考情報のために私の.vueの完全なコードを見つけてください。

<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

あなたはスムーズtransition仕事をするためにdiv要素のそれぞれにkey属性を与える必要があります。あなたの場合は'と表示されますが、これは問題の可能性があります。削除してみてください。

変更

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

だけでなく、他の場所で

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

と同様に。