transition对display、visibility、height: auto等属性无效，因其无中间状态或非数值无法插值；应显式声明可动画属性，避免使用transition: all，并用opacity+visibility模拟display切换。
display、visibility、height: auto 这类属性根本不会动
transition 对这些属性完全无效，不是写法错，是浏览器压根不支持插值计算。比如 display 从 none 切到 block，没有中间状态可算；visibility 只有 visible/hidden 两个离散值；height: auto 中的 auto 不是具体数值，无法参与过渡。
常见错误写法：
div { transition: display 0.3s; }
div.show { display: block; }
这段代码不会报错，但动画零效果——浏览器直接忽略 display 这一项，其他属性（如同时写的 opacity）照常过渡。
transition: all 会悄悄放过不支持的属性
写 transition: all 0.3s 看似省事，实际隐患很大：只要某次样式变更涉及 display、z-index、font-family 或 background-image，这些属性就静默失效，而你根本看不到提示。
更可控的做法是显式列出：
transition-property: opacity, transform, background-color;- 避免用
all，尤其在组件复用或多人协作时 - 查 MDN 文档时盯紧「Animatable」字段是否为 ✅
DevTools 里一眼看出哪些 transition 被忽略了
别靠猜，直接打开 Elements 面板 → Styles 标签页，找 transition 或 transition-property：
- 如果该行被划掉，说明语法错误（比如漏了单位、拼错属性名）
- 鼠标悬停提示 “Transition will not be applied to
display” 就是明确警告 - 切到 Computed 标签页搜
transition-property，看浏览器实际解析出的值——all往往被降级为只含opacity和transform
想模拟 display 切换？用 opacity + visibility 组合
真要实现“淡入淡出+隐藏元素”，得绕开 display：
-
opacity控制透明度（支持过渡） -
visibility: hidden配合opacity: 0，确保元素不可交互且不占布局空间 - 关键点：
transition必须定义在基础类（未 hover 状态），不能只写在.show类里 - 如果需要精确同步消失时机，加
transition-timing-function: step-end
真正麻烦的从来不是怎么写动画，而是搞清哪些值浏览器根本没法插值——这点容易被忽略，但决定了动画能不能动起来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
