直接加 animate__slideinup 没反应是因为 bootstrap 5 模态框依赖 js 动态添加 .show 类触发显示，而 animate.css 动画需类名增删才能激活；必须同时满足：html 中含 class="modal fade"、根元素有 animate__animated 基础类、动画类通过 show.bs.modal 事件动态添加并在 hidden.bs.modal 中清除。
为什么直接加 animate__slideInUp 没反应
因为 Bootstrap 5 的模态框显示逻辑是 JS 动态添加 .show 类，而 animate.css 的动画依赖类名增删触发 animation 属性——两者不自动协同。HTML 里没写 fade 类、没监听事件、没加 animate__animated 基础类，三个漏一个就白配。
- 检查模态框根元素是否含
class="modal fade"（不是data-bs-fade，Bootstrap 5 不认这个） -
animate__animated必须存在，否则所有animate__*类无效 - 别把动画类写死在 HTML 里，比如
class="modal-dialog animate__slideInUp"——它只播一次，第二次点开就失效
怎么用 show.bs.modal 安全注入动画类
要在 DOM 就位但动画未启时加类，确保每次打开都重播。同时必须在关闭后清理，否则类堆积导致错乱或重复播放。
- 监听
show.bs.modal：此时 modal 已插入 DOM，.show尚未生效，适合加入场类 - 用
element.classList.add('animate__animated', 'animate__slideInUp')，不要用 jQuery 的addClass（除非你封装了带animationend清理的插件） - 监听
hidden.bs.modal：此时动画已结束、.show已移除，此时调classList.remove('animate__animated', 'animate__slideInUp') - 避免用
will-change: animation或全局transition: all，会拖慢首次渲染
.modal.fade .modal-dialog 是唯一有效的动画作用点
Bootstrap 5 只对这个选择器链应用 transition 逻辑。给 .modal、.modal-content 或 .modal-body 加 transition 都无效，纯属浪费 CSS 重排计算。
- 初始态必须设为
.modal.fade .modal-dialog { transform: translateY(100%); opacity: 0; } - 显示态写成
.modal.fade.show .modal-dialog { transform: translateY(0); opacity: 1; } - 显式声明
transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s ease-out，别用all - 遮罩层
.modal-backdrop要同步动，否则会“啪”一下闪出来，需单独覆盖.modal.fade .modal-backdrop的 opacity 过渡
动画结束后容易被忽略的清理动作
哪怕用了 animate.css，如果没在 hidden.bs.modal 里清除类，下次打开时浏览器可能跳过动画——因为类名还在，animation 不会重播已存在的帧。这不是 Bug，是 CSS 动画规范行为。
- 清理必须包含
animate__animated和具体动画类，缺一不可 - 别依赖
animationend事件清理，它在 modal 关闭过程中可能被中断或延迟 - 如果 modal 内有表单或焦点元素，动画结束前别让
tabindex或focus()干扰过渡节奏
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
