根本原因是浏览器未走gpu合成路径，opacity和transform本应由compositor处理，但若混用top/margin或漏设will-change，就会退化为重排，尤其在ios safari和旧安卓webview中导致首帧跳变、滑动迟滞、遮罩不同步等现象。
为什么移动端模态框动画卡顿或闪动
根本原因不是“动画太慢”，而是浏览器没走 GPU 合成路径：opacity + transform 本该由 compositor 处理，但若你写了 top、margin 或漏掉 will-change，就会退化为重排（reflow），尤其在 iOS Safari 和旧安卓 WebView 中表现明显。常见现象包括首帧跳变、滑动迟滞、遮罩层不同步“啪”一下闪出。
- 检查
.modal-dialog是否仍用top: 50%; left: 50%; margin-top: -200px;—— 这种写法必触发重排，换成transform: translate(-50%, -50%) - 确认
.modal.fade .modal-dialog初始态有opacity: 0和位移（如transform: translateY(100%)），否则第一帧直接显示内容 - 给
.modal-dialog加will-change: transform, opacity（仅在动画期间生效，JS 中 show 前加、hide 后移除） - 避免在动画过程中修改
padding、font-size或display—— 这些属性变更会打断合成流
如何让遮罩层（backdrop）和对话框同步动
遮罩层不同步是移动端最常被忽略的撕裂点：.modal-backdrop 的 fade 和 show 必须与 .modal-dialog 完全一致，否则视觉上像“两层动画错拍”。Bootstrap 默认只对 .modal-dialog 做 transform，但 backdrop 只靠 opacity 过渡，容易滞后。
- 必须同时覆盖三处选择器：
.modal.fade .modal-backdrop（初始态）、.modal.fade.show .modal-backdrop（结束态）、以及.modal.fade .modal-dialog和.modal.fade.show .modal-dialog -
.modal.fade .modal-backdrop设opacity: 0；.modal.fade.show .modal-backdrop设opacity: 0.5（或其他目标值） - transition 声明必须显式写出：
transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1)，别用all—— Safari 下all会把z-index也纳入过渡，导致闪烁 - 确保自定义 CSS 引入顺序在 Bootstrap 主 CSS 之后，否则你的规则不生效
怎么用 animate.css 实现入场动画却不卡
直接在 HTML 里写死 animate__slideInUp 类无效，因为 Bootstrap 的 .show 是 JS 动态添加的，CSS 动画需要“类名新增”这个动作来触发。硬塞进去等于没触发。
- 监听
show.bs.modal事件，在 DOM 挂载完成但动画尚未开始时注入动画类：document.getElementById('myModal').addEventListener('show.bs.modal', function() { this.querySelector('.modal-dialog').classList.add('animate__animated', 'animate__slideInUp'); }); - 动画结束后立即清理类：
hide.bs.modal里调removeChildClass('animate__animated', 'animate__slideInUp')，防止重复触发或残留状态 - 别在
.modal-dialog上同时叠加多个 transform（比如既有translateY又有scale），优先用单一方向位移，减少合成层压力 - 如果用的是 animate.css v4+，确认已引入
animate.min.css且未被 PurgeCSS 误删 —— 常见于构建工具中未配置白名单
哪些 CSS 属性改了反而更慢
看似“优化”的写法，实际可能拖垮性能：比如拉长动画时间到 0.5s、用 linear 缓动、或给整个 .modal 加 will-change: all。这些操作在低端设备上会让主线程长时间阻塞。
-
transition: all 0.3s ease→ 改为transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease-out -
max-height或height用于动画 → 彻底禁用，模态框高度应由内容自然撑开，不要用这类触发布局计算的属性 -
filter: drop-shadow()或backdrop-filter在.modal-dialog上 → 这些会强制创建新图层并频繁重绘，移动端慎用 -
animation替代transition→ 除非必要（如复杂序列），否则纯 transition 更轻量、更可控
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
