Bootstrap 5 模态框动画需作用于 .modal.fade .modal-dialog，初始设 transform: translateY(-20px) 和 opacity: 0，配合 .modal.fade.show .modal-dialog 恢复状态，并确保 HTML 含 fade 类，避免 transition: all 及干扰性 transform。模态框默认没动画，transition必须作用在正确元素上Bootstrap 5 的 modal 默认只靠 display: none 控制显隐，不触发 transition。直接给 .modal 或 .modal-dialog 加 transition 没用------因为显示时是 JS 瞬间切换 display 和 opacity，浏览器根本来不及过渡。实操建议：动画必须作用在 .modal.fade .modal-dialog 上，且仅当父级有 .fade 类时才生效（Bootstrap 依赖这个类触发 CSS 动画逻辑）.modal-dialog 初始状态需设 transform: translate(0, -20px) + opacity: 0，显示时恢复为 transform: translate(0, 0) + opacity: 1务必配合 .modal.fade.show .modal-dialog 的最终态定义，否则动画只播一次就卡住show 类的时机很关键，别漏掉 .fadeBootstrap 是靠 JS 在模态框 show 过程中动态加 .show 类，并依赖 .fade 类存在才启用 CSS 动画流程。如果 HTML 里没写 fade，JS 就不会触发动画逻辑，transition 再全也没用。常见错误现象：立即学习"前端免费学习笔记（深入）"； Shakespeare 一款人工智能文案软件，能够创建几乎任何类型的文案。
相关推荐
Old Uncle Tom19 小时前
Harness Engineering 综述码界筑梦坊19 小时前
282-基于Python的豆瓣音乐可视化分析推荐系统LJianK119 小时前
java多态_Evan_Yao19 小时前
栈与队列：后进先出与先进先出的智慧J2虾虾19 小时前
Spring AI Alibaba - Skills 技能疯狂打码的少年19 小时前
Cache的三种映射方式（直接/全相联/组相联）带派擂总19 小时前
Python全栈开发 Day08_控制文件指针移动 异常捕获 推导式我是一颗柠檬19 小时前
【MySQL全面教学】MySQL备份与恢复Day14（2026年）XLYcmy19 小时前
面向Agent权限系统的快速审计工具渣渣盟19 小时前
MySQL DDL操作全解析：从入门到精通，包含索引视图分区表等全操作解析