View Transitions API：应对动画元素被遮挡的层级问题

使用 View Transitions API 时，若多个元素设置了 view-transition-name，会因隐式创建独立堆叠上下文导致动画元素被相邻过渡元素遮盖；通过动态设置 element.viewTransitionName 属性可精准控制参与过渡的元素，避免意外层级冲突。

使用 view transitions api 时，若多个元素设置了 `view-transition-name`，会因隐式创建独立堆叠上下文导致动画元素被相邻过渡元素遮盖；通过动态设置 `element.viewtransitionname` 属性可精准控制参与过渡的元素，避免意外层级冲突。

在使用 View Transitions API 构建平滑页面过渡效果时，一个常见但易被忽视的问题是：动画中的元素意外被其他具有 view-transition-name 的兄弟元素遮挡。这并非 CSS z-index 失效，而是 View Transitions 规范的底层机制所致——当元素拥有非空 view-transition-name（无论是通过 CSS 声明还是 JS 设置），浏览器会为其创建独立的 view transition layer，该层自带隔离的堆叠上下文（stacking context），从而打破原有文档流的层叠顺序。

如示例中所示：<div> 和 <article> 均在 CSS 中静态声明了 view-transition-name，当触发 startViewTransition() 并替换 <div> 为 .grow 元素时，两者均被纳入过渡快照，且因各自独立的过渡层，.grow（继承 div 的 transition name）可能被 article 的过渡层覆盖，造成视觉上“钻到下面”的错觉。

✅ 正确解法是：仅对真正参与本次过渡的元素动态赋予 viewTransitionName，其余元素保持无名状态（即 viewTransitionName = ''），从而避免无关元素创建干扰性堆叠上下文。

以下是推荐实践：

<style>  body {    display: grid;    grid-template-columns: 10vw 10vw;    gap: 1em;  }  div {    /* 移除 CSS 中的 view-transition-name */    grid-column: 1;    width: 10vw;    height: 10vh;    background-color: hotpink;  }  article {    /* 同样移除 CSS 中的 view-transition-name */    grid-column: 2;    width: 10vw;    height: 10vh;    background-color: forestgreen;  }  .grow {    view-transition-name: div; /* 仅在目标新元素上声明 */    position: fixed;    left: 25vw;    top: 25vh;    width: 50vw;    height: 50vh;    background-color: hotpink;  }</style><div></div><article></article><button>click me</button><script>  document.querySelector("button").addEventListener("click", () => {    // ✅ 关键步骤：仅在 transition 开始前，为即将退出的元素显式设置 viewTransitionName    const oldDiv = document.querySelector("div");    oldDiv.viewTransitionName = "div"; // 动态赋值，确保它参与过渡    document.startViewTransition(() => {      const newSection = document.createElement("section");      newSection.classList.add("grow");      document.body.appendChild(newSection);      oldDiv.remove();    });  });</script>

? 注意事项：

• element.viewTransitionName 是可读写属性，优先级高于 CSS 中的 view-transition-name，且支持运行时动态修改；
• 不要为不参与本次过渡的元素（如示例中的 <article>）设置任何 view-transition-name —— 即使是空字符串也建议显式设为 '' 以明确意图；
• 当前（2024）该 API 仅在 Chromium 内核浏览器（Chrome 111+、Edge 111+）中稳定支持，使用前请检测：if ('startViewTransition' in document)；
• 若需多元素协同过渡（如列表项逐个入场），应为每个目标元素单独、精确地分配唯一 viewTransitionName，并确保旧/新节点命名严格对应。

通过将 view-transition-name 的控制权从静态 CSS 转移到运行时 JS 逻辑，开发者能完全掌控哪些元素进入过渡层、何时进入、以何种身份参与合成，从根本上规避堆叠上下文污染，让 View Transitions 表现更可预测、更专业。