加了fade类仍硬切是因为模态框根元素缺失class="modal fade"，必须写在最外层modal容器上而非.modal-dialog或data-bs-fade；底部上滑需同步修改.modal.fade .modal-dialog初始态、.modal.fade.show .modal-dialog目标态及.modal.fade .modal-backdrop遮罩过渡，并显式声明transform和opacity的transition。
为什么加了 fade 类还是硬切？
最常见原因是模态框根元素没写 fade 类：class="modal fade" 必须直接写在最外层 <div class="modal"> 上，不是 .modal-dialog，也不是靠 data-bs-fade 属性触发。Bootstrap 5 的 JS 只认 class 名匹配，只负责加/删 show，不解析任何 data 属性。
从底部上滑入场要改哪几处 CSS？
不能只改 .modal.show 的最终状态——初始态、过渡态、遮罩层三者必须同步，否则动画跳变或遮罩“啪”一下闪出来：
-
.modal.fade .modal-dialog：设初始transform: translateY(100%)、opacity: 0 -
.modal.fade.show .modal-dialog：设目标transform: translateY(0)、opacity: 1 -
.modal.fade .modal-backdrop：必须加transition: opacity .3s ease-out，否则遮罩不同步 - 显式声明
transition：用transition: transform .3s ease-out, opacity .3s ease-out，别写all，Safari 下容易出错
自定义 CSS 引入顺序和优先级怎么处理？
你的样式必须比 Bootstrap 原生 CSS 权重高，否则覆盖无效：
- 确保自定义 CSS 文件引入在 Bootstrap CSS 之后
- 推荐加前缀（如
.my-modal .modal.fade），比!important更可控 - 别漏掉
.modal-backdrop的对应规则：.my-modal .modal-backdrop.fade和.my-modal .modal-backdrop.show也要写全
移动端 iOS Safari 滑动卡顿怎么办？
单纯拉长动画时间（比如设成 .5s）反而更卡。关键在硬件加速：
- 给
.modal-dialog加will-change: transform，强制 GPU 渲染 - 避免在
.modal-dialog上设animation或filter，它们会触发 layout，拖慢主线程 - 旧版 Safari 不支持
translateY()简写，得写全transform: translate(0, 0)
