直接给 .tab-pane 加 transition 没用，因为 Bootstrap 5 用 display: none/block 控制显隐，而 display 不可过渡；须改用 opacity、transform 等可过渡属性，并覆盖 .tab-pane.show 的默认样式，配合 visibility 和 pointer-events 精确控制动画与交互。
为什么直接给 .tab-pane 加 transition 没用
Bootstrap 5 的标签页默认用 display: none/block 控制显隐，而 display 属性不可过渡。哪怕你写了 transition: all 0.3s，切换时仍是硬切——根本不会触发 CSS 动画。
必须改用 opacity 和 transform 这类可过渡属性，并配合 visibility 或 z-index 管理层叠与交互状态。
- 禁用
display切换：需覆盖 Bootstrap 默认的.tab-pane.show规则 - 隐藏态用
opacity: 0; transform: scale(0.95); visibility: hidden; - 显示态用
opacity: 1; transform: scale(1); visibility: visible; - 过渡统一写在
.tab-pane基础选择器上，避免只写在.show上（否则入场有动画，退场没有）
如何正确覆盖 Bootstrap 的 .tab-pane 显示逻辑
Bootstrap 5 默认靠 .tab-pane.show 触发 display: block，得先把它“废掉”，再用 CSS 动画接管。
.tab-pane {
opacity: 0;
transform: scale(0.95);
visibility: hidden;
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
<p>.tab-pane.show {
opacity: 1;
transform: scale(1);
visibility: visible;
}</p><p>/<em> 防止未激活 pane 被点击或聚焦 </em>/
.tab-pane:not(.show) {
pointer-events: none;
}注意：pointer-events: none 很关键——否则缩放中的隐藏 pane 仍可能响应点击，尤其表单控件会失焦或提交异常。
立即学习“前端免费学习笔记（深入）”；
淡入缩放动画和 Bootstrap 的 JavaScript 事件怎么协同
Bootstrap 的 shown.bs.tab 事件在 .show class 添加**之后**才触发，但 CSS 过渡此时已开始。所以动画本身不依赖 JS，但若需在动画结束时执行逻辑（如重绘图表、懒加载图片），得监听 transitionend：
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.tab-pane').forEach(el => {
el.addEventListener('transitionend', (e) => {
if (e.propertyName === 'opacity' && el.classList.contains('show')) {
// 此时淡入缩放已完成，可安全初始化子组件
initChart(el);
}
});
});
});- 只监听
opacity是因为transform和visibility过渡时间相同，opacity最晚完成（渲染引擎行为） - 务必加
el.classList.contains('show')判断，否则退场也会触发 - 不要用
shown.bs.tab替代transitionend：它在 class 添加后立刻触发，早于动画结束
移动端缩放动画的兼容性坑点
iOS Safari 对 transform: scale() 在 position: absolute 或 overflow: hidden 容器里容易出现渲染撕裂或模糊，尤其搭配 backface-visibility: hidden 后更明显。
- 给
.tab-content加will-change: transform;可缓解 iOS 渲染卡顿 - 避免在
.tab-pane内设overflow: hidden；若必须裁剪，改用clip-path: inset(0) - 缩放值别用
scale(0.98)这类接近 1 的数——iOS 对亚像素变化敏感，建议用scale(0.9)或scale(0.92) - 如果 tab 内含视频或 canvas，动画期间可能暂停；需在
transitionend后手动恢复播放或重绘
缩放动画看着简单，真正要稳，得同时压住 CSS 渲染管线、JS 事件时机、移动端硬件加速三块地雷。动效只是表，底层的显示控制逻辑才是关键。
