Vue transition-group not working

Question

I want to use transition-group in Vue, it works fine without nesting，but when I use it like this, it acts strangely.

Then I check out animations in developer tools, find that all the list items' transition-duration is actually zero.

developer tools' snap

Then I tried to add display: block !important in style, but it still didn't work

transitionDelay in style doesn't affect the result, I already had a try.

and it may suddenly work fine with the same code

For better understanding, here is what it looks like (need to open with phone or develop tools' mobile devices, if it redirect to the website for desktop, change to mobile mode and then refresh)

 .fade-enter-active, .fade-leave-active { transition: opacity .3s; } .fade-enter, .fade-leave-active { opacity: 0; } .slide-enter-active, .slide-leave-active { transition: transform .3s; } .slide-enter, .slide-leave-active { transform: translateX(-100%); } .list-enter-active, .list-leave-active { transition: all .6s; } .list-enter, .list-leave-active { transform: translateX(-350px); opacity: 0; }

 <transition name="fade"> <div class="black-layout" v-show="isShowCatalog"> <transition name="slide"> <div v-show="isShowCatalog"> <transition-group tag="ul" name="list"> <li v-for="(value, index) of catalog" :key="index + 1" v-show="isShowCatalog" :style="{ transitionDelay: 0.02 * index + 's' }" @click="clickCatalog" :data-search="value.searchStr">{{ value.name }}</li> </transition-group> </div> </transition> </div> </transition>

Answer 1

When using transition-group in vue.js the key of the items should be a unique property. Using the index from the v-for would work in this case because when the position of the item changes, the index of the v-for does not change with them. For your case, you could use a property of each item you are looping through if it is an object or the item itself if they are an array and unique values.

// If catalog is an object
<transition-group tag="ul" name="list">
  <li v-for="value of catalog" :key="value.<propertyName>" v-show="isShowCatalog" :style="{ transitionDelay: 0.02 * index + 's' }" @click="clickCatalog" :data-search="value.searchStr">{{ value.name }}</li>
</transition-group>



// If catalog is an array and unique
<transition-group tag="ul" name="list">
  <li v-for="value of catalog" :key="value" v-show="isShowCatalog" :style="{ transitionDelay: 0.02 * index + 's' }" @click="clickCatalog" :data-search="value.searchStr">{{ value.name }}</li>
</transition-group>

Answer 2

更改代码：删除 v-for 中的索引

<li v-for="value of catalog" :key="value.index">