javascript - Vue过渡组不起作用(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.

(我想在Vue中使用transition-group，它可以很好地工作而不嵌套，但是当我这样使用它时，它的行为很奇怪。)

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

(然后我尝试添加display: block !important样式，但是仍然无法正常工作)

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

(样式中的transitionDelay不会影响结果，我已经尝试过。)

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> 

  ask by Mondo translate from so

Answer 1

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

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