View Transition API 标签切换动画缩放问题

嘿，这个问题我之前也碰到过！核心原因是View Transition API默认会对新旧元素的快照做缩放匹配——当你切换到宽度差异大的标签时，浏览器为了让过渡前后的元素"对齐"，就会自动缩放那个蓝色的高亮背景，导致你看到的拉伸效果。

下面给你一套完整的修复方案，能让所有标签切换都保持平滑的滑动动画，完全避免缩放：

解决方案思路 #

我们需要把高亮背景从标签的伪元素改成一个独立的指示器元素，这样可以精确控制它的位置和宽度，让View Transition只处理它的位置和尺寸变化，而不是缩放整个元素快照。

完整代码修改 #

1. HTML 修改

在.tabs容器里添加一个单独的.tab-indicator元素，用来作为可移动的高亮背景：

<div class="content">
    <div class="tabs">
        <div class="tab active" data-tab="1">Introduction</div>
        <div class="tab" data-tab="2">Storytelling in a Small Village</div>
        <div class="tab" data-tab="3">Technology</div>
        <!-- 新增高亮指示器 -->
        <div class="tab-indicator"></div>
    </div>
    <div class="tab-content">
        <div data-tab-content="1" style="display: block">
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
        <div data-tab-content="2" style="display: none">
            <p>In a faraway land, there was a small village.</p>
        </div>
        <div data-tab-content="3" style="display: none">
            <p>Technology has transformed the world.</p>
        </div>
    </div>
</div>

2. CSS 修改

移除原来的伪元素样式，改为给指示器设置样式，并指定它为View Transition的目标：

.tabs {
    position: relative;
    /* 确保标签和指示器在同一层上下文 */
}

.tab {
    padding: 10px;
    background-color: #f0f0f0;
    cursor: pointer;
    position: relative;
    z-index: 1; /* 让标签在指示器上方 */
    overflow: hidden;
    display: inline-block;
}

.tab:hover {
    background-color: #fff;
}

.tab.active {
    color: #fff;
}

/* 高亮指示器样式 */
.tab-indicator {
    view-transition-name: tab;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background-color: #007bff;
    z-index: 0;
    transition: none; /* 让View Transition控制动画 */
}

.tab-content {
    padding: 20px;
}

::view-transition-group(tab) {
    animation-duration: 0.5s;
    /* 可以指定更贴合滑动的动画曲线，比如ease-in-out */
    animation-timing-function: ease-in-out;
}

3. JavaScript 修改

更新逻辑，初始化时设置指示器位置，点击标签时计算目标标签的位置和尺寸，触发View Transition并更新指示器：

const tabs = document.querySelectorAll(".tab");
const tabContents = document.querySelectorAll(".tab-content > div");
const tabIndicator = document.querySelector(".tab-indicator");
let currentTab = 0;

// 初始化指示器位置
function updateIndicator(index) {
    const activeTab = tabs[index];
    const rect = activeTab.getBoundingClientRect();
    const tabsRect = tabs[0].parentElement.getBoundingClientRect();
    // 计算相对位置（避免页面滚动影响）
    tabIndicator.style.left = `${rect.left - tabsRect.left}px`;
    tabIndicator.style.width = `${rect.width}px`;
}

// 初始化第一个标签
updateIndicator(0);

tabs.forEach((tab, index) => {
    tab.addEventListener("click", () => {
        if (currentTab === index) return;
        currentTab = index;
        
        document.startViewTransition(() => {
            // 更新指示器位置和宽度
            updateIndicator(index);
            // 切换标签active状态
            tabs.forEach((t, i) => {
                t.classList.toggle("active", i === index);
            });
        });
        
        // 切换内容
        tabContents.forEach((tc, i) => {
            tc.style.display = i === index ? "block" : "none";
        });
    });
});

为什么这个方案有效？ #

现在View Transition处理的是同一个指示器元素的位置和宽度变化，而不是两个不同尺寸的元素快照。浏览器会自动为这个元素的left和width属性创建平滑的过渡动画，完全不会出现缩放拉伸的情况——不管标签宽度差异多大，都是平滑的滑动效果。

备注：内容来源于stack exchange，提问作者Moorthy G