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

这是因为当<transition-group>评估发生变化时，会立即添加/删除进入/退出v-show。两个标签模板应位于单个<transition-group>内：

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

demo

过渡组不起作用

1 个答案: