Chrome中View Transitions API无法应用正确过渡效果问题排查

你遇到的核心问题有两个：

• 重复的view-transition-name导致侧边区块无法触发位移过渡
• 新旧元素共用同一动画且未区分入场/退场逻辑，同时默认根过渡覆盖了预期效果

修复步骤 #

1. 修正重复的view-transition-name #

页面中两个侧边的.block1使用了相同的view-transition-name="e1"，View Transitions API要求同一名称在页面中只能对应一个元素，否则无法正确跟踪元素位置变化。将它们改为唯一名称：

<div class="content">
    <div class="block block1" view-transition-name="e1">Test block</div>
    
    <div class="block block-trans" view-transition-name="block-trans">
        View 1
        <button onclick="swap('template#view2', '.block-trans')">Go to View 2</button>
    </div>

    <div class="block block1" view-transition-name="e2">Test block</div>
</div>

2. 区分新旧元素的动画逻辑 #

原CSS中，新旧元素使用了完全相同的退场动画，导致新元素也执行淡出位移而非预期的入场效果。需要分别定义退场和入场动画，同时禁用默认根过渡避免全局淡入淡出：

/* 禁用默认根过渡，消除全局淡入淡出 */
::view-transition-group(root) {
  animation-duration: 0s;
}

/* 旧元素的退场动画 */
::view-transition-old(block-trans) {
  animation: .3s exit-transition ease forwards;
}

/* 新元素的入场动画 */
::view-transition-new(block-trans) {
  animation: .3s enter-transition ease forwards;
}

@keyframes exit-transition {
  from { opacity: 1; translate: 0; rotate: 0; }
  to { opacity: 0; translate: 1rem -5rem; rotate: 8deg; }
}

@keyframes enter-transition {
  from { opacity: 0; translate: -1rem 5rem; rotate: -8deg; }
  to { opacity: 1; translate: 0; rotate: 0; }
}

3. 保留原有JS逻辑 #

你的JS触发逻辑本身无问题，模板中的元素已带有正确的view-transition-name属性，无需修改：

function swap(inTemplSelector, outSelector) {
    let inTempl = document.querySelector(inTemplSelector);
    let inEl = inTempl.content.cloneNode(true).firstElementChild;
    let outEl = document.querySelector(outSelector);

    if (document.startViewTransition) {
        document.startViewTransition(() => {
            outEl.replaceWith(inEl);
        });
    }
    else outEl.replaceWith(inEl);
}

效果说明 #

修复后：

• 中间的.block-trans元素会执行自定义的退场/入场动画
• 侧边的两个区块会基于位置变化触发平滑的位移过渡
• 全局不再有默认的淡入淡出干扰效果

内容的提问来源于stack exchange，提问作者Jacob Runge