Bootstrap模态框动画路径不能用text-*类控制，因.modal-dialog为fixed定位且仅响应transform/opacity变化；自定义入场路径需覆盖三处CSS选择器：.modal.fade .modal-dialog设初始态、.modal.fade.show .modal-dialog设目标态、.modal.fade .modal-backdrop同步过渡，并显式声明transition属性。
Modal动画进入位置为什么不能直接用text-*类控制
因为.modal-dialog是 fixed 定位，且 Bootstrap 动画只响应 transform 和 opacity 的 CSS 变化，text-start、mx-auto 这类布局类对它完全无效。你改了文本对齐或 margin，.modal-dialog 的位移起点根本不会变。
从底部上滑、从右侧平移等自定义入场路径怎么写
必须覆盖三处 CSS 选择器，并确保 HTML 根元素含 fade 类：
-
.modal.fade .modal-dialog：设初始transform，比如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 cubic-bezier(0.22, 0.61, 0.36, 1), opacity .3s ease-out; —— 写 all 在 Safari 下会卡顿或跳帧。
如何让小屏从底部进、大屏从顶部进
不能靠单一 CSS 类切换，得用媒体查询 + JS 监听断点：
- 先写两套 CSS：
@media (max-width: 991.98px) { .modal.fade .modal-dialog { transform: translateY(100%); } }和@media (min-width: 992px) { .modal.fade .modal-dialog { transform: translateY(-50px); } } - JS 监听
window.matchMedia('(min-width: 992px)')，匹配变化时触发$('#myModal').modal('handleUpdate')，否则新transform不生效 - 注意：如果模态框 DOM 被挂载在非
<body>下（比如 Vue 的 teleport 到某个position: relative容器），所有transform基准都会偏移，动画路径就乱了
animate.css 类为什么加了也不动
Bootstrap 的动画流程不自动触发 animate.css 的 animation，它只走自己的 transition 流程。想用 animate__bounceIn 等效果，必须手动监听事件：
- 在
show.bs.modal里给.modal-dialog加animate__animated animate__bounceIn - 在
hidden.bs.modal里立刻移除这两个类，否则第二次打开会失效 - 但要注意：这和原生
fade动画冲突，要么全用 CSS transition，要么全用 animate.css，混用容易错帧或卡住
真正难的不是写几行 CSS，而是确保 .modal-dialog 的初始 transform 值、媒体查询切换时机、以及 DOM 挂载位置三者对齐——少一个，动画就“偏航”。
