Vue 过渡组不工作

Question

我想在Vue中使用transition-group，它在没有嵌套\xef\xbc\x8c的情况下工作正常，但是当我像这样使用它时，它的行为很奇怪。

\n

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

\n

开发者工具快照

\n

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

\n

\n

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

\n

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

\n

\n

为了更好理解，这是它的样子（需要用手机或开发工具的移动设备打开，如果是重定向到桌面网站，请更改为移动模式然后刷新）

\n

\r\n

\r\n

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

\r\n

<transition name="fade">\n  <div class="black-layout" v-show="isShowCatalog">\n    <transition name="slide">\n      <div v-show="isShowCatalog">\n        <transition-group tag="ul" name="list">\n          <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>\n        </transition-group>\n      </div>\n    </transition>\n  </div>\n</transition>

\r\n

\r\n

\r\n

\n

Answer 1

在 vue.js 中使用时，transition-group项目的键应该是唯一的属性。在这种情况下使用indexfrom thev-for会起作用，因为当项目的位置发生变化时， the 的索引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>