转换组不工作

Question

https://codepen.io/joshuajazleung/pen/BJgXYp

我有这个过渡组，当我点击‘构建进度’选项卡时，我希望它会有淡入淡出的效果，但看不到过渡。

<transition-group name="fade" class="row no-gutters" v-show="currentTab !== 'living'">
  <div class="col-6 pr-3 pb-3" v-for="(item, index) in constructionGallery" :key="'construction' + item">
    <img :src="item.photoThumbSmall" alt="Gallery Photo index" class="img-fluid">
    <p>fserf</p>
  </div>
</transition-group>

根据我在Chrome Inspector中看到的，转换后的元素中没有添加任何类。

我做错什么了？

Answer 1

这是因为当v-show求值发生变化时，会立即添加/删除进入/退出的<transition-group>。这两个选项卡模板应该位于单个<transition-group>中

<transition-group name="fade" class="row no-gutters">
  <template v-if="currentTab === 'living'">...</template>
  <template v-else>...</template>
</transition-group>

demo