javascript - Vue 过渡组不工作

Question

我想在Vue中使用transition-group，它在没有嵌套的情况下工作得很好，但是当我这样使用它时，它的行为很奇怪。

然后我在开发者工具中查看动画，发现所有列表项的过渡持续时间实际上为零。

developer tools' snap

然后我尝试在样式中添加display: block !important，但仍然不起作用

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

and it may suddenly work fine with the same code

为了更好地理解，here is what it looks like (需要用手机或者开发工具的移动设备打开，如果是桌面端跳转到网站，请切换到移动模式再刷新)

.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

在 vue.js 中使用 transition-group 时，元素的键应该是唯一的属性。在这种情况下，使用 v-for 中的 index 会起作用，因为当元素的位置发生变化时， 的索引会发生变化。 v-for 不会随之改变。对于您的情况，您可以使用要循环的每个元素的属性(如果它是对象)或元素本身(如果它们是数组和唯一值)。

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