使用 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 表现更可预测、更专业。
