应另起自定义类名并在Bootstrap CSS后加载，监听shown.bs.collapse等事件触发动画，避免修改核心类；入场缩放需等高度展开后添加transform，Modal需分别控制入场退场及backdrop动画，排查display:none、CSS权重和硬件加速问题。
用 transition 和 animation 替换 Bootstrap 默认过渡
Bootstrap 的 fade、slide 等动画本质是 CSS 类 + transition 或 @keyframes，但它们被写死在 bootstrap.css 里，直接覆盖类名（比如 .fade）容易失效——因为 Bootstrap 的 CSS 权重高，且部分动画依赖 JS 动态加/删类的时机。
正确做法是：不碰原生类，另起一套自定义类名，用 !important 控制关键属性（仅限必要项），并确保在 Bootstrap CSS 之后加载你的样式。
- 把自定义动画 CSS 放在
<link rel="stylesheet">引入 Bootstrap 之后，或用<style>写在</body>前 - 避免修改
.show、.collapsing这类由 JS 控制状态的核心类，改用独立类如.my-slide-in - 对需要 JS 触发的组件（如
collapse），监听shown.bs.collapse事件再手动添加你的动画类
collapse 组件如何实现入场缩放动画？
默认 collapse 只有高度过渡，没有缩放。想加 scale，得绕过它的 height 和 opacity 过渡逻辑，用 transform 单独控制。
关键点：不能只给 .collapse 加 transform，因为初始状态是 display: none，transform 不生效；必须等元素显示后、高度展开完成时再触发缩放。
立即学习“前端免费学习笔记（深入）”；
- 监听
shown.bs.collapse事件，在回调里给目标元素加.animate-scale-in -
.animate-scale-in定义为：transform: scale(0.95); opacity: 0; transition: transform 0.3s ease, opacity 0.2s ease; - 再用
.animate-scale-in.show覆盖为：transform: scale(1); opacity: 1; - 注意：不要同时用
transform和height过渡，会触发重排，卡顿
Modal 弹窗淡入+上浮动画的坑在哪？
很多人直接给 .modal 加 animation: modal-fade-up 0.4s，结果点击关闭时动画不反向播放，或者背景遮罩（.modal-backdrop）不同步。
根本原因是 Bootstrap Modal 的显示/隐藏由 JS 控制 .show 类和 display 切换，而 CSS 动画不会自动“倒播”。你得自己管两件事：入场动画、退场动画、以及 backdrop 的联动。
- 入场：监听
shown.bs.modal，给.modal加.modal-enter-active类（含animation） - 退场：监听
hide.bs.modal，先移除.show，再加.modal-leave-active，并在动画结束（animationend）后真正销毁节点 -
.modal-backdrop必须单独加动画，比如用opacity+transition，别指望它跟着.modal一起动 - 别用
animation-fill-mode: forwards，Modal 隐藏后需还原状态，否则下次打开位置错乱
为什么加了 animation 但没效果？常见排查点
不是代码写错，而是被 Bootstrap 的 CSS 规则压制、或触发条件没满足。最常踩的三个坑：
-
display: none时所有animation和transform都不执行——确认元素已渲染且display不为none - Bootstrap 的
.fade类自带opacity: 0和transition，如果你的自定义动画也动opacity，会被它覆盖，加!important或换属性（比如用filter: blur()） - 硬件加速缺失导致动画卡顿：给动画元素加
transform: translateZ(0)或will-change: transform（但别滥用，影响内存） - Vue/React 等框架中，动态 class 拼接出错（比如
:class="{ 'animate': show && !isLeaving }"），漏掉状态判断会导致类没加上
动画本身不难，难的是和 Bootstrap 的生命周期、CSS 权重、JS 状态机对齐。最稳的方式永远是：少动原生类，多用事件钩子，动画只负责“视觉表现”，状态切换交给 Bootstrap 自己。
