滑动标签页过渡效果需分三部分实现：下划线指示器用 transform + transition + requestanimationframe 精准定位；内容切换用 view transitions 并确保 view-transition-name 严格一致；标签栏容器须设 scroll-behavior: smooth 或 scrollto({behavior: 'smooth'})。

滑动标签页的过渡效果不能靠 CSS transition 直接控制滚动本身——它只作用于元素样式变化，而标签栏滚动是容器位移行为。 真正要做的，是让下划线指示器平滑移动、让标签内容区域切换有视觉连贯性，这两者需分开处理，且都依赖 DOM 尺寸读取时机。

下划线指示器怎么用 transform + transition 实现平滑移动

核心不是“动标签”，而是动一条独立的 <div class="indicator">。它必须：<ul> <li>放在标签栏容器内，且容器设 <code>position: relative

自身设 position: absolute; bottom: 0; height: 2px; width: 100%; transition: transform 0.3s ease, width 0.3s ease

每次激活新标签时，用 getBoundingClientRect() 读取该标签的 offsetLeft 和 offsetWidth，再设置 indicator.style.transform = `translateX(${left}px)` 和 indicator.style.width = `${width}px`

避免在 click 回调里立刻读尺寸——此时浏览器还没重排，offsetLeft 还是旧值；应包裹在 requestAnimationFrame(() => { /* 读取并更新 */ }) 中

标签内容区域切换怎么加 View Transitions 动画

如果标签切换是通过替换 DOM（比如点击后 article.innerHTML = newContent），可用 document.startViewTransition() 包裹更新逻辑：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 旧内容和新内容中，对应标题/关键元素必须带相同 style="view-transition-name: title"（大小写、空格、值完全一致）
• 不能在 startViewTransition() 里发请求或等异步数据；得先拿到完整 HTML 或 DOM 片段，再进回调里同步替换
• 目标容器（如 <article></article>）必须已挂载在 document 中，不能是刚 createElement 出来还没 append 的
• 别给旧元素提前加 display: none 或 opacity: 0，否则快照捕获失败，动画只剩新元素淡入

为什么 scroll-behavior: smooth 对标签栏无效

因为标签栏滚动通常是内部容器（如 <div class="tabs-scroller">）的 <code>scrollLeft 变化，不是页面主滚动。这时候：

• 必须给该容器单独设 scroll-behavior: smooth，且它得有 overflow-x: auto 和固定宽度
• 不能靠 transition 去动 scrollLeft——CSS 不支持该属性过渡
• 若要用 JS 控制滚动位置，得调用 element.scrollTo({ left: x, behavior: 'smooth' })，而不是手动改 scrollLeft
• 注意：移动端 Safari 对 behavior: 'smooth' 在非主滚动容器中支持不稳定，建议 fallback 到 requestAnimationFrame 逐帧更新

最容易被忽略的是尺寸读取时机和 view-transition-name 的稳定性——前者错一帧就跳变，后者差一个空格就退化为无动画。过渡效果是否“丝滑”，80% 取决于你有没有在正确时间点拿到正确尺寸、有没有让浏览器拍到两张可比的快照。