Bootstrap Modal淡入动画路径由.modal.fade .modal-dialog（初始态）、.modal.fade.show .modal-dialog（目标态）和.modal.fade .modal-backdrop（遮罩层）三处CSS规则共同控制，需同步设置transform、opacity及显式transition声明。
Modal淡入动画路径由哪些CSS规则控制
bootstrap modal的淡入动画路径不是js控制的，而是纯css驱动：初始状态是.modal.fade .modal-dialog带transform: translate(0, -50px)和opacity: 0，显示时.modal.fade.show .modal-dialog覆盖为transform: none和opacity: 1。所谓“路径”，本质就是这组transform值的变化轨迹。
想改成从底部上滑？必须覆盖三处CSS选择器
只改.modal-dialog的最终状态不够，初始态、过渡态、遮罩层都要对齐，否则动画跳变或遮罩不同步：
-
.modal.fade .modal-dialog：设初始transform: translateY(100%)、opacity: 0 -
.modal.fade.show .modal-dialog：设目标transform: translateY(0)、opacity: 1 -
.modal.fade .modal-backdrop：同样要加opacity过渡，否则遮罩“啪”一下闪出来
别漏掉transition声明——必须显式写transition: transform .3s ease-out, opacity .3s ease-out，不能用all，Safari下容易出错。
为什么加了fade类还是硬切
最常见原因是HTML结构漏掉了fade这个class：class="modal fade"必须写在模态框根元素上，不是.modal-dialog，也不是靠data-bs-fade属性触发。Bootstrap 5只认class名匹配，JS只负责加/删show，不解析data属性。
- 检查DOM里是否真有
modal fade两个class共存 - 确认自定义CSS引入顺序在Bootstrap CSS之后，否则你的覆盖规则无效
- 用浏览器开发者工具的Computed面板看
transition最终值从哪来，比猜更准
移动端滑动卡顿怎么办
单纯拉长动画时间（比如设成0.5s）可能更卡，尤其iOS Safari或老旧安卓WebView。关键不是时长，而是硬件加速：
- 给
.modal-dialog加transform: translateZ(0)或will-change: transform，强制GPU渲染 - 避免在
.modal-dialog上设animation或复杂filter，它们会触发layout，拖慢主线程 - 别用
display: block/none切换，始终用opacity + visibility组合，防止重排
动画路径可以改，但底层依赖的fade和show类协作机制不能绕开——漏掉任何一个环节，效果就断在半路。
