Vue 2中<transition mode="out-in">首个元素无过渡效果问题求助

开发者阿泽

2026-8-3

可能的原因分析

初始渲染未触发过渡：Vue 2 的 <transition> 组件默认不会对页面初始渲染的元素应用过渡效果。如果页面加载时 $store.state.modal.isOpen 初始值为 false，TappaPaginazione 会直接渲染，不会触发进入过渡。需要为 <transition> 添加 appear 属性，强制初始渲染时触发过渡：
```
<transition name="fade" mode="out-in" appear>
```
元素key值不完整：当前仅给 TappaPaginazione 设置了key，按钮元素未设置唯一key。Vue 依赖key值区分不同元素，当切换时如果key不唯一或缺失，可能无法正确识别元素替换行为，导致过渡失效。建议给两个元素都设置独立的key：
```
<transition name="fade" mode="out-in">
  <TappaPaginazione v-if="!$store.state.modal.isOpen" :key="`paginazione-${$route.params.slug}`"/>
  <button v-else @click="toggleModal(null)" class="btn" :key="`close-btn`">Chiudi</button>
</transition>
```
CSS样式未正确生效：检查Tailwind的@apply是否正确编译出对应的过渡样式。如果编译后的CSS中没有transition-opacity duration-500 ease-in-out这些属性，过渡自然无法生效。可以直接写原生CSS替代@apply验证：
```
.fade-enter-active,
.fade-leave-active {
  transition: opacity 500ms ease-in-out;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
```
条件切换的时机问题：如果$store.state.modal.isOpen的状态在Vue实例挂载前就已确定，初始渲染的元素不会触发过渡。这种情况下，除了添加appear属性，也可以在实例挂载后再初始化该状态，确保过渡能被触发。