Question

我想在Vue中使用transition-group，它没有嵌套就可以正常工作，但是当我像这样使用它时，它的行为很奇怪。

然后我查看开发者工具中的动画，找到所有列表项＆＃39; transition-duration实际上为零。

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

transitionDelay的风格并没有影响结果，我已经尝试过了。

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

为了更好地理解，here is what it looks like（需要打开手机或开发工具和移动设备，如果它重定向到桌面网站，更改为移动模式然后刷新）

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

更改代码：删除v-for

中的索引

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

Answer 2

在vue.js中使用transition-group时，项的键应为唯一属性。在这种情况下，可以使用index中的v-for，因为当项目的位置更改时，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>

Vue过渡组无法正常工作

2 个答案:

更改代码：删除v-for