CODEWITHSUNDEEP
vue.jsvuejs2
Joshua Leung
Joshua Leung

Reputation: 2399

Transition-group not working

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

I have this transition-group which I expect to have fade effect when I click the 'CONSTRUCTION PROGRESS' tab, but no transition is seen. 

<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>

From what I see from the Chrome Inspector, no classes are added to the transitioned elements.

What did I do wrong?

Upvotes: 0

Views: 1424

Answers (1)

tony19
tony19

Reputation: 138336

That's because the entering/exiting <transition-group> is being added/removed immediately when the v-show evaluation changes. The two tab templates should be inside a single <transition-group>:

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

demo

Upvotes: 1

Related Questions