HTML标签页切换动画需用CSS过渡或JS控制，因display不可过渡；可用opacity+transform或max-height实现淡入/展开效果，并须同步更新ARIA属性确保可访问性。
HTML 标签页本身不自带切换动画效果，display: none 切换是瞬间的，要实现“滑动”“淡入”“缩放”等视觉切换，必须靠 CSS 过渡或 JavaScript 控制。纯 HTML + CSS 的 :target 方案连 JS 都不用，自然也不支持过渡；而加了 JS 的方案，动画控制权完全在你手上。
为什么 :target 无法触发 CSS transition
因为 :target 匹配的是元素是否为当前 URL 锚点所指，它不改变元素的“状态属性”，只是切换 display 值（比如从 none → block），而 display 是不可过渡的 CSS 属性。
- 尝试写
transition: display 0.3s—— 完全无效，浏览器直接忽略 -
visibility可过渡但不占布局空间，需配合opacity或max-height模拟“展开” - 真正能过渡的替代方案：用
opacity+transform控制显隐，再用 JS 切换类名触发
data-tab + 类名切换如何加淡入效果
这是最可控、兼容性好、且不依赖框架的做法。核心是把“显示/隐藏”逻辑从 display 搬到可动画的属性上。
- 面板默认设为
opacity: 0; transform: translateY(10px); pointer-events: none; - 激活类
.tab-panel.active设为opacity: 1; transform: translateY(0); pointer-events: all; - 在
.tab-panel上加transition: opacity 0.25s ease, transform 0.25s ease; - JS 中先移除所有
.active，再给目标面板加.active—— 浏览器会自动触发动画
注意：别忘了给 .tab-panel 加 will-change: opacity, transform;（可选，对频繁切换有轻微性能提升）
用 max-height 实现内容区“展开收缩”动画
适合高度不固定但内容较短的标签页（如 FAQ、设置项）。它比 height: auto 过渡更可靠，因为 height 不能直接过渡到 auto。
- 初始状态：
max-height: 0; overflow: hidden; opacity: 0; - 激活状态：
max-height: 500px; opacity: 1;（500px 要大于可能的最大高度） - 加
transition: max-height 0.3s ease-out, opacity 0.3s ease; - 缺点：如果内容超长，500px 不够会截断；太大会导致动画变慢
ARIA 方案里动画和可访问性怎么兼顾
加动画本身不影响 ARIA，但必须确保状态同步不滞后。例如：面板开始淡入时，aria-hidden="false" 必须和 .active 类同时加上，不能等动画结束才改。
- 错误做法：在
setTimeout(() => { el.setAttribute('aria-hidden', 'false') }, 300) - 正确做法：类名和 ARIA 属性在同一个 JS 语句中更新，让屏幕阅读器立刻感知变化
- 动画期间保持
tabindex="-1"在非活跃面板上，避免键盘焦点误入隐藏内容
真正容易被忽略的，不是“怎么加动画”，而是“动画过程中状态是否始终与 DOM 和 ARIA 同步”。一个没同步的 aria-hidden，会让屏幕阅读器读出本该隐藏的内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
