直接用 display: none 切换会卡顿或跳变，因其不触发 CSS 过渡、强制重排且导致资源重载；应改用 opacity + visibility + transform 组合实现平滑动画。
为什么直接用 display: none 切换会卡顿或跳变
浏览器对 display 属性的变更不触发 CSS 过渡，它属于强制重排行为，动画帧直接丢弃。你写 transition: all 0.3s，但一旦 JS 执行 el.style.display = 'none'，效果就是瞬间消失，毫无缓动。
更麻烦的是：内容区若含图片、视频或 iframe，display: none 会让它们暂停加载或释放资源，切回来时重新触发，造成白屏、错位甚至重复请求。
- 改用
opacity+visibility组合，两者都支持 transition 且语义清晰 -
visibility: hidden保留布局占位，避免 DOM 重排抖动 -
opacity: 0配合transform: translateY(10px)实现淡出+微移，比纯 fade 更有层次感 - transition 声明必须写在基础选择器上（如
.tab-panel），不能只写在.active类里
怎么让标签内容切换带平滑动画而不是硬切
核心就两条：只对可硬件加速的属性做过渡，且起止状态必须显式定义。别碰 height、max-height、top，它们要么计算不准，要么强制重排。
最稳方案是 opacity + transform，例如：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
.tab-panel {
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity 0.28s cubic-bezier(0.34, 0.69, 0.1, 1),
transform 0.28s cubic-bezier(0.34, 0.69, 0.1, 1);
}
.tab-panel.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
- 动画时间控制在 0.25s–0.35s，太短用户感知不到，太长拖慢操作节奏
- 父容器加
overflow: hidden，防止transform溢出可见 - 若面板内有表单或 iframe，
visibility: hidden不会自动暂停，需手动处理（比如切走时iframe.src = ''）
下划线指示器怎么跟着标签按钮平滑移动
动的不是按钮本身，而是一条独立的 关键陷阱：点击后立刻读 这不是 JS 写错了，而是触摸事件被系统拦截或坐标没对齐。iOS Safari 默认有 300ms 延迟，安卓部分 WebView 会把 click 当成滑动。 真正难的从来不是“怎么切”，而是切走后图片有没有懒加载、视频有没有暂停、表单输入有没有保存——这些细节线上最容易被忽略。transform: translateX() 移动，而不是 left —— 后者会触发重排。offsetLeft，值还是旧的。必须等浏览器完成重排后再取位置：tabButton.addEventListener('click', () => {
requestAnimationFrame(() => {
const rect = tabButton.getBoundingClientRect();
const containerRect = tabsContainer.getBoundingClientRect();
indicator.style.transform = `translateX(${rect.left - containerRect.left}px)`;
indicator.style.width = `${rect.width}px`;
});
});
resize 或用 MutationObserver 补位transition: transform 0.3s ease, width 0.3s ease
移动端点不中、滑动错位、快速连点失效怎么办
min-height: 44px; padding: 8px 16px，确保可触面积touchstart 替代 click，并在回调开头加 event.preventDefault()
touch-action: pan-y（允许纵向滚动）或 touch-action: none（完全交由 JS 处理）if (isSwitching) return; isSwitching = true; setTimeout(() => isSwitching = false, 300);
tabindex="0" 和 aria-controls —— 键盘用户 Tab 到按钮却无法触发，就是这里漏了
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
