position: absolute 元素的 top/left 位移不触发 transition，应改用 transform（如 translate、scale）和 opacity 配合实现居中淡入滑入动画，避免使用 transition: all，确保元素已渲染且状态明确。
对话框用 position: absolute 时 transition 不生效？
直接加 transition 通常没反应，因为 position: absolute 元素的位移（比如 top/left）默认不触发过渡动画——浏览器只对「可计算的、有中间状态的属性」做插值，而 top 从 auto 变成具体数值时，初始值不可动画化。
- 改用
transform: translateY()或transform: scale()，它们天然支持硬件加速且始终可过渡 - 确保元素已渲染（非
display: none），否则transition不会启动；可用visibility: hidden+opacity: 0配合控制显隐 - 避免同时设置
top和transform，后者会覆盖前者，且混合使用易导致布局抖动
transform + transition 实现淡入+滑入效果
这是最稳定、兼容性好（IE10+）、性能高的做法。关键在于把位移和透明度拆到不同属性上，各自控制。
dialog {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.8);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
dialog.show {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
-
scale(0.8)初始缩小，scale(1)恢复，视觉上更自然 -
opacity单独过渡，避免文字在缩放过程中模糊（某些浏览器下transform缩放会影响字体渲染） - 不要写
transition: all 0.3s，它会让意外属性（如z-index）也参与过渡，引发不可控行为
如何让对话框居中且动画不偏移？
用 transform: translate(-50%, -50%) 是唯一可靠方案。若用 top: 50%; left: 50% 再配 margin 调整尺寸，动画中宽高变化会导致偏移。
-
绝对定位必须搭配
transform居中，而不是靠margin或calc() - 如果对话框内容动态加载（比如异步弹出），先设
opacity: 0; visibility: hidden;，等 DOM 渲染完成再加show类并设visibility: visible - 移动端需加
will-change: transform;提前提示浏览器优化（但别滥用，可能增加内存开销）
transition 触发时机容易被忽略的细节
动画不是加了就自动播——它依赖「属性值变化」这个触发点。很多同学写了样式却没看到动效，问题常出在 JS 控制逻辑里。
立即学习“前端免费学习笔记（深入）”；
- 用
element.classList.add('show')是安全的；但element.style.opacity = '1'紧接着element.style.transform = '...'可能因重排被合并，导致只播一次 - 稳妥做法：先加类，或用
setTimeout(() => {}, 0)分离两次样式修改 - 检测是否触发：在 DevTools 的 Elements 面板里选中元素，勾选「Toggle element state」→
:hover或手动加 class，看 Styles 面板里transition是否标为 active
