Vue过渡组不起作用答案

【问题标题】：Vue transition-group not workingVue过渡组不起作用
【发布时间】：2017-04-29 05:00:35
【问题描述】：

我想在Vue中使用transition-group，不用嵌套也能正常工作，但是当我这样使用时，它的行为很奇怪。

然后我在开发者工具中查看动画，发现所有列表项的transition-duration实际上都是零。

然后我尝试在样式中添加display: block !important，但还是不行

style中的transitionDelay不影响结果，我已经试过了。

它可能会突然用相同的代码正常工作

为了更好的理解，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>

【问题讨论】：

标签： javascript css vue.js transition

【解决方案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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

将您的答案显示为代码会很有帮助。为此，使用 4 个空格缩进它。 :) 我将继续编辑您的答案以进行演示。