Javascript Vue过渡组不工作

我想在Vue中使用过渡组，它在没有嵌套的情况下工作得很好，但当我这样使用它时，它的行为很奇怪

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

然后我尝试添加

display:block！重要提示

时尚，但仍然不起作用

过渡播放风格不影响效果，我已经尝试过了

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

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

。淡入激活状态，
.淡入淡出激活状态{
过渡：不透明度；
}
.淡入，
.淡入淡出激活状态{
不透明度：0；
}
.滑入激活状态，
.滑动保持活动状态{
转变：转变；
}
.滑入，
.滑动保持活动状态{
转化：translateX（-100%）；
}
.列表进入活动状态，
.列出活动状态{
过渡期：全部6秒；
}
.输入列表，
.列出活动状态{
转换：translateX（-350px）；
不透明度：0；
}

目录的（值、索引）：key=“index+1”v-show=“isShowCatalog”：style=“{transitionlay:0.02*index+'s'}”@click=“clickCatalog”：数据搜索=“value.searchStr”>{{value.name}

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

在vue.js中使用

转换组时，项的键应为唯一属性。在这种情况下，使用
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>

//如果目录是对象
{value.name}
//如果目录是数组且唯一
{{value.name}
将答案显示为代码会很有帮助。为此，请使用4个空格缩进：我将继续编辑您的答案以演示。
// 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>