javascript - Vue2 过渡模式不起作用

Question

下面是我的.vue的代码。 div 之间的交换工作得很好，transition fade 也工作得很好。但是 mode out-in 根本不起作用。两个元素在过渡时同时显示。

编辑##

对不起，我不熟悉 fiddle 。请在下面找到我的 .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

您需要为每个 div 赋予 key 属性，以使 transition 顺利运行。在您的情况下，我看到了一个额外的 '，这可能是个问题，请尝试将其删除。

改变

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

到

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

其他地方也是如此。