必须修改 .modal.fade .modal-dialog 的 transform 初始值，因其决定入场方向；需同步调整 .modal.fade.show .modal-dialog 终点值及 .modal-backdrop.fade 过渡，移动端需加 translatez(0) 防卡顿，并确保 fade 类存在。
必须改 .modal.fade .modal-dialog 的 transform 初始值
Bootstrap Modal 的入场方向完全由 .modal.fade .modal-dialog 的初始 transform 值决定，不是 JS 控制，也不是 data-bs-* 属性。默认是 transform: translateY(-50px)（从上往下落），想换方向就得覆盖这个初始偏移。
- 从底部上滑：把初始
transform改成translateY(100%)，目标状态保持translateY(0) - 从右侧平移：初始设
translateX(100%)，目标translateX(0) - 从左上角缩放入场：初始用
translate(-20%, -20%) scale(0.9)，目标translate(0, 0) scale(1) - 别只改
.show状态——初始态没对，第一帧就跳变，动画“抽搐”
三处 CSS 必须同步修改，否则动画撕裂
只动 .modal-dialog 的位移，不碰 backdrop 和 show 状态，会出现模态框滑一半、遮罩层“啪”一下盖上来，或者关闭时反向错位。
-
.modal.fade .modal-dialog：设入场起点（如transform: translateY(100%); opacity: 0） -
.modal.fade.show .modal-dialog：设终点（如transform: translateY(0); opacity: 1） -
.modal-backdrop.fade：必须同步加transition: opacity 0.3s ease-out，否则遮罩淡入/淡出不同步 - 漏掉任意一处，开发者工具里「Computed」面板能看到 transition 值来自 Bootstrap 默认，不是你写的规则
移动端从底部上滑要加硬件加速
iOS Safari 或旧安卓 WebView 中，纯 translateY(100%) → 0 可能卡顿甚至掉帧，尤其在长列表页弹出时。
- 给
.modal-dialog加transform: translateZ(0)或will-change: transform - 避免同时过渡
margin或padding—— 这些会触发 layout，让 GPU 加速失效 - 别用
transform: translate(0, 0)简写，IE11 需要完整写法transform: translate(0px, 0px) - 缓动函数建议用
cubic-bezier(0.22, 0.61, 0.36, 1)，比ease-out在低端 WebView 更稳
用 animate.css 时不能静态加类
直接在 HTML 里写 class="modal fade animate__slideInUp" 没用——Bootstrap 的 .show 是 JS 动态添加的，而 animate.css 动画需要类名“新增”这个动作来触发。
- 监听
show.bs.modal事件，在回调里给.modal-dialog加animate__slideInUp - 监听
hidden.bs.modal事件，手动移除动画类，否则第二次打开可能不触发 - 别对
.modal根元素加 animate 类——动画作用点必须是.modal-dialog，否则位移错位 - 如果用了
!important覆盖 transition，记得在 animate.css 的 keyframes 里也加!important，否则被 Bootstrap 的 transition 覆盖
方向改得再花哨，只要 .modal 元素没带 fade 类，就等于白写。这是所有自定义动画的前提，不是可选项。
