用CSS transition实现标签页淡入淡出需同时控制opacity和visibility，避免仅用opacity导致布局占位或无障碍问题；推荐结合transform实现硬件加速滑动，配合class切换与状态同步确保可访问性。
用 CSS transition 实现标签页淡入淡出
原生 <details></details> 或纯 JS 切换标签页时，默认是突兀显示/隐藏，没有过渡效果。想加淡入淡出，关键不是改 HTML 结构，而是控制 opacity 和 visibility 的组合动画。
常见错误是只设 opacity: 0 → 1，但没配 visibility: hidden → visible，导致不可见元素仍占布局、可被聚焦或读屏器读取。
- 给内容区容器加
transition: opacity 0.3s ease, visibility 0.3s - 隐藏时用
opacity: 0; visibility: hidden，显示时用opacity: 1; visibility: visible - 别用
display: none配合 transition ——display不支持过渡
用 transform 做左右滑动切换（兼容性更好）
比起 opacity，transform: translateX() 触发硬件加速，动画更流畅，尤其在移动端。它也不影响文档流，无需担心布局抖动。
注意：必须配合 will-change: transform 提前提示浏览器优化，否则低端设备可能卡顿。
立即学习“前端免费学习笔记（深入）”；
- 默认状态设为
transform: translateX(0) - 非激活页设为
transform: translateX(-100%)（左滑出）或translateX(100%)（右滑出） - 确保父容器
overflow: hidden，避免滑动时内容溢出可见 - 动画时间建议控制在
0.25s–0.35s，太慢显得迟滞，太快用户来不及感知变化
JavaScript 控制 class 切换比直接操作 style 更可靠
用 JS 直接写 el.style.opacity = '0' 容易和 CSS 中的其他规则冲突，也难复用动画逻辑。推荐统一用 class 控制状态，CSS 负责表现。
典型错误是切 tab 时忘记移除上一个 active 类，导致多个面板同时显示或动画错乱。
- 给每个标签面板加唯一
id，对应按钮的data-target - 切换时先
document.querySelectorAll('.tab-pane.active').forEach(el => el.classList.remove('active')) - 再给目标元素加
active类：document.getElementById(targetId).classList.add('active') - 在 CSS 中定义
.tab-pane { transition: all 0.3s ease; }和.tab-pane.active { ... }
.tab-pane {
opacity: 0;
visibility: hidden;
transform: translateX(-10px);
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tab-pane.active {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
移动端触摸滑动切换需额外处理 touch 事件
单纯靠 click 或 pointerdown 在 iOS Safari 上有 300ms 延迟，且无法响应手指拖拽。如果要做类似 App 的左右 swipe 切页，得监听 touchstart/touchmove/touchend 并计算位移。
容易忽略的是 touchcancel 事件 —— 比如用户划到一半弹出系统通知，此时不重置状态会导致后续手势失效。
- 记录
touchstart的clientX，在touchend时对比clientX差值 - 差值 > 50px 才触发切换，避免误触
- 切换后立即调用
el.style.transform = ''清除内联样式，让 CSS 动画接管回弹 - 给容器加
touch-action: pan-y，防止横向滑动时触发页面滚动
