必须用高优先级css选择器覆盖.modal.fade .modal-dialog和.modal.fade.show .modal-dialog的transition属性，显式声明transform与opacity各自的cubic-bezier()缓动函数，不可用all，默认值为cubic-bezier(0.22, 0.61, 0.36, 1)。
怎么改 Modal 淡入淡出的缓动函数（cubic-bezier）
Bootstrap Modal 的淡入淡出动画曲线由 .modal.fade .modal-dialog 的 transition 中的 cubic-bezier() 控制，不是 JS 配置项，也不是全局 CSS 变量——必须用高优先级选择器覆盖，默认值是 cubic-bezier(0.22, 0.61, 0.36, 1)。
常见错误是只改 .fade 类或直接写 transition: all，结果 alert、tooltip 全部变慢，甚至 Safari 下动画卡顿或跳帧。
- 必须限定作用域：
.modal.fade .modal-dialog（入场起始态）和.modal.fade.show .modal-dialog（入场结束态）都要显式声明同一组cubic-bezier - 不能只写
transform或只写opacity—— 缺一个，位移或淡入就不同步，视觉上“先闪后滑”或“滑完再淡” - 示例（替换默认缓动）：
.modal.fade .modal-dialog {<br> transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),<br> opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);<br>} - 如果想让淡入更“轻快”、淡出更“收尾稳”，可分别控制：在
.modal.fade.show .modal-dialog里单独设transition-timing-function，但需确保transition-property不被重置
为什么改 data-bs-animation 或 animation: true 没用
Bootstrap 5 的 animation 选项只决定是否启用 .fade 类，它是个布尔开关，不接受缓动函数、毫秒数或对象。传 { animation: 'ease-in-out' } 或 data-bs-animation="cubic-bezier(...)" 完全无效，控制台无报错，但浏览器根本不会读取。
真正生效的是 CSS 层面的 transition-timing-function 值，JS 只负责加/删 .show 类，触发已存在的 CSS 规则。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
new bootstrap.Modal(el, { animation: false })→ 移除.fade，硬切，无任何缓动可调 -
data-bs-backdrop="static"只影响遮罩行为，和动画曲线无关 - HTML 中漏掉
class="modal fade"，哪怕 CSS 写得再全，动画也根本不启动
移动端 Safari 和旧安卓 WebView 的缓动异常怎么修
某些缓动函数（比如 ease-out 或自定义 cubic-bezier(0.1, 0.9, 0.2, 1)）在 iOS Safari 或 Android 4.4 WebView 中可能触发渲染抖动、首帧跳变或动画中断，本质是 GPU 加速未激活 + 主线程阻塞。
这不是缓动函数写错了，而是浏览器对复杂贝塞尔曲线的解析和合成能力有限。
- 优先用 Bootstrap 默认的
cubic-bezier(0.22, 0.61, 0.36, 1)，它经过多端实测，兼容性最稳 - 避免
cubic-bezier(0, 0, 0.58, 1)这类“陡升型”曲线，容易在低端设备上丢帧 - 给
.modal-dialog加will-change: transform, opacity，提前告知浏览器哪些属性会变，提升合成效率 - 别在动画过程中动态改
font-size、margin或display—— 这些会强制触发布局重排，缓动再漂亮也卡成 PPT
如何验证你写的缓动曲线真正在生效
靠肉眼判断“是不是更顺了”不可靠，尤其在不同设备上表现差异大。最稳的方式是打开浏览器开发者工具，点开「Computed」面板，选中 .modal-dialog 元素，直接看最终生效的 transition-timing-function 值从哪来。
- 如果显示来自
bootstrap.min.css，说明你的自定义 CSS 没加载、顺序不对，或选择器权重不够 - 如果显示
ease或linear，大概率是你漏写了cubic-bezier()，或者用了all导致浏览器 fallback 到默认 - 如果
transition整条规则都没出现，检查 HTML 是否真有class="modal fade"，且没被 JS 动态删掉 - 动画过程中按住鼠标拖动时间轴（Chrome DevTools 的 Animations 面板），能直观看到贝塞尔曲线的实时变化轨迹
