Vue.js 报错：Invalid transition name: xxx —— 3 分钟让过渡名字「合法化」
正文目录
- 报错含义：Vue 在挑剔什么「过渡名字」？
- 5 大高频翻车场景 & 修复代码
- 万能兜底：合法字符与默认值
- 预防 checklist（不再踩坑）
- 一句话总结
一、报错含义：Vue 在挑剔什么「过渡名字」？
当你在控制台看到：
Invalid transition name: xxxVue 在告诉你：
「你在<transition name="xxx">或v-enter/leave类名里用了非法字符或空名字，过渡无法识别。」
本质：过渡名字非法、空、重复或类名不匹配。
二、5 大高频翻车场景 & 修复代码
① 名字空或空格
<!-- ❌ 名字空 --> <transition name=""> <div v-if="show">内容</div> </transition> <!-- ❌ 名字空格 --> <transition name=" "> <div v-if="show">内容</div> </transition>修复：给合法名字
<!-- ✅ 合法名字 --> <transition name="fade"> <div v-if="show">内容</div> </transition>② 名字非法字符
<!-- ❌ 名字非法字符 --> <transition name="fade@"> <div v-if="show">内容</div> </transition>修复：合法字符（字母、数字、下划线、连字符）
<!-- ✅ 合法字符 --> <transition name="fade-in"> <div v-if="show">内容</div> </transition>③ 类名不匹配
<!-- ❌ 类名不匹配 --> <transition name="fade"> <div v-if="show" class="my-fade-enter">内容</div> </transition> <style> .my-fade-enter { opacity: 0; } /* ❌ 类名不匹配 */ </style>修复：类名匹配过渡名字
<!-- ✅ 类名匹配 --> <transition name="fade"> <div v-if="show">内容</div> </transition> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-to { opacity: 0; } </style>④ 动态名字非法字符
<!-- ❌ 动态名字非法字符 --> <transition :name="transitionName"> <div v-if="show">内容</div> </template> <script setup> const transitionName = ref('fade@'); // ❌ 非法字符 </script>修复：合法字符
consttransitionName=ref('fade-in');// ✅ 合法字符⑤ 第三方库过渡名字非法
// ❌ 库提供非法名字import{Transition}from'third-party';<Transition name="fade@">...</Transition>修复：封装或映射合法名字
constlegalName='fade-in';// ✅ 映射合法名字<Transition name={legalName}>...</Transition>三、万能兜底：合法字符与默认值
| 场景 | 规则 | 示例 |
|---|---|---|
| 合法字符 | 字母、数字、下划线、连字符 | fade-in |
| 空名字 | 避免空字符串 | fade |
| 动态名字 | 变量值为合法字符 | ref('fade-in') |
| 类名匹配 | 匹配过渡名字 | .fade-enter-active |
四、预防 checklist
- 过渡名字避免空字符串和空格
- 过渡名字只用字母、数字、下划线、连字符
- 类名匹配过渡名字（
.fade-enter-active） - 动态名字变量值为合法字符
- 第三方库映射合法名字
- 控制台「Invalid transition name」= 立即**合法字符 + 类名匹配」
五、一句话总结
「Invalid transition name」= 名字非法、空、类名不匹配。」
用「合法字符 + 类名匹配 + 空字符串避免」三件套，让过渡名字永远合法，动画立刻生效！
最后问候亲爱的朋友们，并邀请你们阅读我的全新著作
📚 《Vue.js 3企业级项目开发实战（微课视频版》
)
