直接用 display: none 做加载动画会失败，因为 display 是非过渡属性，浏览器不支持对其做渐变补间；应改用 opacity 和 visibility 配合 transition 实现平滑动画。
为什么直接用 display: none 做加载动画会失败
因为 display 是非过渡属性，浏览器不支持对其做渐变补间。你给它加 transition: display 0.3s 完全无效，元素只会“啪”一下出现或消失。
真正能动画的属性只有几个：opacity、transform、visibility（配合 opacity），以及部分伪元素的 width（如 progress::-webkit-progress-value）。
- 用
opacity: 0+visibility: hidden替代display: none - 切换时只改
opacity和visibility，不碰display - 确保加载层有固定定位（
position: fixed）和高z-index，避免被其他内容遮挡
transition 怎么写才让加载动画平滑收起
关键不是“怎么动”，而是“什么时候动”。很多开发者写了 transition: opacity 0.4s ease-out，但动画仍卡顿或不触发——问题常出在 CSS 触发时机上。
- 必须先设置初始态：
opacity: 0; visibility: hidden; - 再通过 JS 添加类（如
.loading-active），该类里定义opacity: 1; visibility: visible; - 不能靠 JS 直接设
style.opacity = "1"后立刻设"0"，中间要强制重排（如读取offsetHeight）才能让浏览器识别状态变化 - 收起时监听
transitionend事件，确认opacity到 0 后再移除 DOM 或清空内容，避免残留占位
加载层隐藏后页面内容“闪一下”怎么办
这是最常被忽略的渲染细节：加载层消失瞬间，下方内容因重绘布局而跳动。根源是加载层默认占据文档流（比如用了 position: static），或者其父容器高度塌陷。
- 加载层必须用
position: fixed或position: absolute，脱离文档流 - 主内容区域不要依赖加载层存在来撑开高度；建议给
body加overflow: hidden防止滚动条消失导致内容右移 - 如果用全屏遮罩，记得加
pointer-events: none到加载完成后的隐藏态，避免残留点击穿透
用 opacity 过渡比 transform 更适合加载动画吗
是的，对加载层这种“整体淡入淡出”场景，opacity 更自然、更轻量。而 transform: translateY(-100%) 之类更适合菜单滑入这类有方向感的交互。
-
opacity动画由合成器线程处理，几乎不触发布局（layout）和绘制（paint），性能更稳 - 移动端 Safari 对
transform+opacity混合过渡偶尔有闪烁，单用opacity兼容性更好 - 如果一定要滑动效果（比如从顶部下拉加载提示），优先用
transform: translateY()+opacity联动，别只用top或margin—— 它们会强制重排
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
