打印时CSS过渡导致布局错乱，需在@media print中重置transition所有子属性为none或0s，并强制设transform:none、opacity:1、visibility:visible；动态类场景还需beforeprint清理class或内联样式，Safari需fallback matchMedia。
打印时 CSS 过渡仍触发导致布局错乱
浏览器在调用 window.print() 或用户点击打印时，部分元素若正处在 transition 动画过程中（比如 hover 后未完全结束、JS 触发的 class 切换），可能被截取中间状态，造成打印预览中位置偏移、透明度异常或尺寸错误。这不是 bug，而是过渡动画在媒体查询未隔离时仍参与渲染流程。
@media print 中重置 transition 相关属性
必须显式将所有可能影响布局和可见性的过渡相关属性设为初始值，仅靠 transition: none 不够——它不重置 transform、opacity、visibility 等已被动画修改的终态值。
-
transition、transition-property、transition-duration、transition-timing-function、transition-delay全部设为none或0s - 强制还原动画可能影响的样式：如
transform: none、opacity: 1、visibility: visible - 避免使用
!important，除非对应规则本身带!important（否则会被忽略）
@media print {
*,
*::before,
*::after {
transition: none !important;
transition-property: none !important;
transition-duration: 0s !important;
transition-timing-function: linear !important;
transition-delay: 0s !important;
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
}
}
动态类名切换场景需额外处理
如果过渡依赖 JS 控制的 class（如 .is-open 触发动画），打印前仅禁用 transition 不足以还原 DOM 状态——元素可能仍保留动画后的 transform 值或临时 opacity。此时需在打印前主动“归位”。
- 监听
beforeprint事件，在触发前移除所有含过渡行为的 class - 或对关键元素调用
element.style.removeProperty('transform')等清理内联样式 - 注意：Safari 不支持
beforeprint，需 fallback 到监听matchMedia('print').addEventListener
transition-delay 导致打印内容延迟渲染
当存在 transition-delay: 0.3s 且元素在打印触发瞬间刚添加 class，浏览器可能尚未应用最终样式，就进入打印快照阶段，结果输出的是 delay 开始前的状态（例如菜单还处于 opacity: 0）。
立即学习“前端免费学习笔记（深入）”；
- 打印样式中必须覆盖
transition-delay: 0s，不能只写transition: none - 若业务逻辑强依赖 delay（如提示框淡入），建议改用
@keyframes+animation并在@media print中设animation: none，更可控 - 检查 DevTools 的 “Rendering” 面板 → 勾选 “Emulate CSS media” → 选 “print”，可实时验证效果
