transition不能直接作用于display属性，因其为离散值；应改用opacity+visibility或height/max-height+overflow组合，并注意step-end时序、max-height取值及js过渡控制。
transition 不能直接作用于 display 属性
很多人一上来就给 display: none 和 display: block 加 transition，结果发现完全没动画——这是最常踩的坑。display 是离散值，浏览器不支持对其做插值过渡，transition 直接被忽略。
可行的替代方案是用 opacity + visibility 或 height + overflow 组合：
-
opacity: 0+visibility: hidden（隐藏时不可交互、不占布局） -
height: 0+overflow: hidden（适合下拉菜单类内容，需预设height或用max-height模拟） - 避免只用
opacity，否则元素仍可点击、聚焦，影响可用性
用 opacity + visibility 实现真·无缝切换
这个组合兼顾视觉渐变和交互状态控制，且兼容性好（IE10+）：
div {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease, visibility 0.3s step-end;
}
关键点：
-
step-end让visibility在过渡结束瞬间才变化，避免中间帧出现“透明但可交互”状态 - 不要写
transition: all 0.3s，否则可能意外触发其他属性过渡（比如color或transform） - 切换时 JS 要同时改两个属性：
element.style.opacity = '0'; element.style.visibility = 'hidden';
需要高度收放？慎用 max-height 过渡
想实现展开/收起动画却不知道内容高度？常用做法是用 max-height 代替 height：
.panel {
max-height: 500px; /* 设一个足够大的上限 */
overflow: hidden;
transition: max-height 0.4s ease, opacity 0.4s ease;
}
但要注意：
-
max-height必须设具体数值（不能是none），否则过渡失效 - 如果内容实际高度远小于设定值，收起时会“坠落感”明显；过大则展开慢
- 更稳妥的做法是 JS 先读取
scrollHeight，再动态设max-height，过渡完再清除内联样式
JS 控制时机比 CSS 更关键
CSS 只负责“怎么动”，JS 决定“什么时候动”。常见问题：切换太快导致过渡被中断或卡顿。
- 用
getComputedStyle确认上一次过渡是否结束，再触发下一次（监听transitionend事件） - 避免在
click中连续多次修改同一组样式，浏览器可能合并渲染帧，导致动画跳过 - 对频繁切换的组件（如 Tab 标签页），建议加防抖或状态锁：
if (isTransitioning) return;
真正难的不是写几行 transition，而是让 DOM 状态、CSS 层叠顺序、JS 执行节奏严丝合缝。稍有错位，动画就断掉或者闪一下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
