怎样为Bootstrap模态框添加自定义的弹出动画_修改CSS的animate与transform-css教程-PHP中文网

必须保留.fade类，否则Bootstrap 5模态框动画失效；动画仅作用于.modal.fade .modal-dialog，需明确设置transform与opacity过渡，同步处理.modal-backdrop，动态控制animate.css类。

怎样为bootstrap模态框添加自定义的弹出动画_修改css的animate与transform

必须保留 `.fade` 类，否则动画根本不会触发

Bootstrap 5 的 modal 动画逻辑完全依赖 .fade 类存在：JS 只负责在合适时机添加/移除 .show，但只有父容器同时具备 .modal 和 .fade 时，CSS 中定义的 transition 才会被浏览器识别并执行。漏掉 fade，哪怕 transition 写得再全，模态框也会直接“闪现”。

常见错误是复制了 animate.css 的类名（比如 animate__slideInUp），却没检查 HTML 结构是否含 fade：
<div class="modal"> → ❌ 无动画<br><code><div class="modal fade"> → ✅ 动画可生效 <h3>动画必须作用在 <code>.modal.fade .modal-dialog 上，不是 .modal 或 .modal-content

直接给 .modal 或 .modal-content 加 transition 是无效的——因为 Bootstrap 的显示逻辑是瞬间切换 display 和 opacity，浏览器来不及过渡。真正起作用的是这个选择器链：.modal.fade .modal-dialog，它控制对话框本体的位移与透明度变化。

初始状态（隐藏）写成：.modal.fade .modal-dialog { transform: translateY(-20px); opacity: 0; }
显示状态（带 .show）写成：.modal.fade.show .modal-dialog { transform: translateY(0); opacity: 1; }
别用 transition: all，明确列出属性：transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s
如果原生缩放（scale(0.95)）干扰你的位移动画，必须显式覆盖：transform: translateY(-20px) scale(1)

用 `animate.css` 时，不能静态加类，得靠事件动态控制

把 animate__slideInUp 直接写死在 HTML 里没用——因为 Bootstrap 的 .show 类是 JS 动态添加的，而 animate.css 的动画需要类名“新增”这个动作来触发。正确做法是监听事件，在 JS 层动态增删。

示例（jQuery）：

立即学习“前端免费学习笔记（深入）”；

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

$('#myModal').on('show.bs.modal', function () {
  $(this).find('.modal-dialog')
    .removeClass('animate__animated animate__slideInUp')
    .addClass('animate__animated animate__slideInUp');
});
$('#myModal').on('hide.bs.modal', function () {
  $(this).find('.modal-dialog').removeClass('animate__animated animate__slideInUp');
});

注意点：