transition对display完全无效，因其为离散属性，无中间状态，浏览器直接丢弃该规则；应使用opacity与visibility协同控制，并显式声明二者transition、设置初始态opacity:0和visibility:hidden、配合transition-delay或transitionend事件确保动画正确执行。
不能用 display 实现过渡，必须用 opacity + transition 配合 visibility 或事件监听才能生效。
为什么 transition: all 或 transition: display 完全无效
浏览器根本不支持对 display 做插值计算——none 和 block 是离散值，没有中间状态。写 transition: all 0.3s 看似省事，但实际会把无关属性（比如 color、border）也纳入动画，导致视觉抖动或首帧丢失；更关键的是，若初始状态没显式声明 opacity: 0，all 根本不知道从哪开始过渡。
-
transition必须精确到属性名：transition: opacity 0.3s ease; - 初始状态（非 hover / 非 show 类）里必须有
opacity: 0;，不能靠继承或后期覆盖 -
visibility: hidden要和opacity: 0分开控制：前者管交互与占位，后者管动画，不能混在同一句里设
如何用纯 CSS 实现点击淡入（无 JS）
依赖 <input type="checkbox"> 的状态切换 + 相邻兄弟选择器 +，适合菜单、折叠面板等静态交互场景。
- HTML 中把 checkbox 设为
position: absolute; clip: rect(0 0 0 0);隐藏但保留在可访问性树中 - 用
<label for="id"></label>绑定点击，触发input:checked + .target - CSS 里定义：
.target { opacity: 0; transition: opacity 0.25s ease; }和input:checked + .target { opacity: 1; } - 注意：此法无法监听动画结束，也不适合滚动触发动画
滚动触发时如何避免“一闪而过”或“消失没动画”
常见错误是 JS 切换类后立刻移除旧类，导致 transition 规则丢失。比如 el.classList.remove('show'); el.classList.add('hide');，remove 一执行，过渡样式就断了。
- 确保
transition声明在稳定载体上：要么写在header标签本身，要么写在永不被移除的基类里（如.nav-base { transition: opacity 0.3s ease; }） - JS 切换顺序应为：先
add新类，再remove旧类（中间可加el.offsetHeight强制重排，但非必需） - 淡出后要释放空间？不能直接设
display: none。得监听transitionend事件，在回调里执行el.style.display = 'none'或el.classList.add('hidden') - 如果元素带
position: sticky，visibility: hidden比display: none更安全——它保留定位上下文，不会导致 sticky 行为重置
容易被忽略的细节：过渡时长与兼容性
0.1s 人眼难察觉变化，1.2s 又拖慢反馈节奏。0.25–0.4s 是多数 UI 场景的舒适区间。IE9+ 原生支持 opacity + transition，无需 polyfill；但若用 max-height 做高度过渡，需预设一个足够大的值（如 max-height: 500px），否则动画会卡顿。
- 不要用
transition: opacity 0.3s缺少 timing function——默认是ease，但显式写出更可控 - 移动端要注意：
opacity动画在部分低端 Android 上可能触发 repaint 而非 compositor，加will-change: opacity可提示优化（慎用，仅对高频动画） - 可访问性方面，
opacity: 0的元素仍会被屏幕阅读器读取，需同步加aria-hidden="true"控制语义可见性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
