transition 对 .tab-content 无效是因为 display: none 是硬隐藏，无中间态；应改用 opacity + visibility 组合，并配合 transform 实现滑入滑出，javascript 切换时需强制重排，无障碍需按过渡节奏管理 aria-hidden 和 tabindex。
transition 为什么对 .tab-content 无效？
直接给 .tab-content 加 transition: opacity 0.3s 通常没反应——因为 display: none 是 CSS 中的“硬隐藏”，浏览器不会对它做过渡动画。一旦 display 在 none 和 block 之间切换，中间没有中间态，transition 就被跳过。
解决办法是改用可过渡的属性：
- 用
opacity+visibility组合：先设opacity: 0; visibility: hidden;，激活时改为opacity: 1; visibility: visible; - 避免用
display控制显隐，只靠opacity和visibility配合transition - 给
.tab-content加transition: opacity 0.25s ease, visibility 0.25s（注意 visibility 本身不可缓动，但配合 opacity 可实现“渐显/渐隐+移出流”效果）
如何用 CSS 实现滑入/滑出过渡？
纯 CSS 滑动过渡需要借助 transform，且必须确保元素始终在文档流中（不能用 display: none）。
关键点：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 所有
.tab-content默认设为position: absolute; top: 0; left: 0; width: 100%;，让它们叠在一起 - 非激活项加
transform: translateX(100%); opacity: 0;，激活项用transform: translateX(0); opacity: 1; - 统一加
transition: transform 0.3s ease, opacity 0.3s ease; - 父容器
.tab-content-wrapper要设position: relative; overflow: hidden;，裁掉滑出区域
JavaScript 切换时如何触发过渡？
单纯切 class 可能因浏览器渲染时机导致过渡失效，尤其在快速连续点击时。
稳妥做法是强制重排（reflow）再加类：
- 先移除所有
.active类 - 对目标内容元素调用
offsetHeight（或getBoundingClientRect()），触发同步布局计算 - 再给目标内容加
.active类 - 示例片段：
contentEl.classList.remove('active');<br>contentEl.offsetHeight; // 强制重排<br>contentEl.classList.add('active');
无障碍与过渡冲突怎么处理？
屏幕阅读器依赖 aria-hidden="true/false" 和 tabindex 管理焦点，但若内容还在过渡中就被设为 aria-hidden="true"，可能造成读屏中断或跳读。
正确节奏是：
- 过渡开始前，把即将隐藏的内容设为
aria-hidden="true"并移除tabindex="0" - 过渡结束后（监听
transitionend），再真正隐藏（如加visibility: hidden） - 对新激活内容，先设
aria-hidden="false"、tabindex="0"，再加.active类触发动画 - 别忘了用
aria-labelledby关联 tab 按钮和对应面板
visibility、aria-hidden、焦点管理时，必须用 transitionend 或 setTimeout 做兜底，否则在慢设备或高负载下会出错。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
