用CSS transition实现选项卡滑块动画的核心是通过绝对定位的.slider元素，监听tab点击动态设置其left和width，并用transition控制平滑过渡；需注意初始对齐、响应式重置及性能优化。
用 transition 实现选项卡滑块动画，核心是让一个“滑块”（通常是个带背景色的 div）根据当前激活项的位置和宽度平滑移动。它不依赖 JavaScript 动画库，纯 CSS 驱动，轻量且性能好。
1. 结构准备：选项卡容器 + 滑块元素
滑块不能写在每个 tab 里，必须作为独立元素放在 tab 标题栏下方或内部，通过定位（position: absolute）覆盖在对应 tab 上。HTML 结构建议如下：
<div class="tabs"> <button class="tab-btn active">首页</button> <button class="tab-btn">产品</button> <button class="tab-btn">关于</button> <div class="slider"></div> <!-- 滑块，始终存在 --> </div>
关键点：
- 所有 .tab-btn 保持 inline-block 或 flex 排列；
- .slider 设为 position: absolute，父容器 .tabs 加 position: relative；
- 滑块宽高需与单个 tab 一致（可用 width: 100px 或 width: calc(100% / 3)），高度一般设为 3px 或 2px。
2. CSS 过渡设置：位置 + 宽度可变，transition 统一控制
滑块要动，就得改变它的 left（水平位置）和/或 width（如果 tab 宽度不均）。过渡必须写在 .slider 上，且针对具体属性：
.slider {
position: absolute;
bottom: 0;
height: 3px;
background: #007bff;
border-radius: 3px;
transition: left 0.3s ease, width 0.3s ease;
}
注意：
- 不要用 transition: all，避免意外触发其他属性变化；
- ease 比 linear 更自然，也可用 cubic-bezier(.4,0,.2,1) 做更细腻缓动；
- 若 tab 是 flex 布局且等宽，width 可固定，只需过渡 left。
3. JS 控制：点击时更新滑块位置与宽度
每次点击 tab，获取该按钮的 offsetLeft 和 offsetWidth，赋给滑块：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
const tabs = document.querySelectorAll('.tab-btn');
const slider = document.querySelector('.slider');
<p>tabs.forEach(tab => {
tab.addEventListener('click', () => {
// 移除所有 active
tabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');</p><pre class="brush:php;toolbar:false;">// 更新滑块位置
slider.style.left = tab.offsetLeft + 'px';
slider.style.width = tab.offsetWidth + 'px';}); });
小技巧：
- 如果 tab 容器有 padding 或 margin，offsetLeft 已自动包含偏移，无需额外计算；
- 若 tab 文字长度差异大（如“首页” vs “关于我们”），用 offsetWidth 动态设宽更稳妥；
- 可加 will-change: left, width 提升动画流畅度（尤其移动端）。
4. 响应式补充：宽度变化时重置滑块
窗口缩放可能导致 tab 位置/宽度变化，此时滑块可能错位。监听 resize 并重新定位（仅在必要时）：
window.addEventListener('resize', () => {
const activeTab = document.querySelector('.tab-btn.active');
if (activeTab) {
slider.style.left = activeTab.offsetLeft + 'px';
slider.style.width = activeTab.offsetWidth + 'px';
}
});
为避免频繁触发，可简单节流（例如用 setTimeout 防抖），但多数场景直接调用影响不大。
不复杂但容易忽略：滑块初始状态要和默认激活的 tab 对齐——在 HTML 中给第一个 tab 加 active 类，并在 CSS 或 JS 初始化时同步设置一次 left 和 width，否则页面加载瞬间会看到滑块在左上角闪一下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
