View Transitions API：解决动画元素被遮挡的层叠顺序问题

2. 在动画触发前动态赋值
最关键的一步来了。在调用 `startViewTransition` 之前，通过Ja vaScript动态地为本次动画的主角设置 `viewTransitionName` 属性。

button.addEventListener("click", () => {
  // ✅ 动态赋值：仅在此刻激活 div 的过渡身份
  document.querySelector("div").viewTransitionName = "div";
  document.startViewTransition(() => {
    const newEl = document.createElement("section");
    newEl.classList.add("grow");
    document.body.appendChild(newEl);
    document.querySelector("div").remove();
  });
});

3. 确保新旧元素名称匹配
别忘了，动画结束后出现的新元素（例如上面代码中添加的 `.grow` 元素），在CSS中仍需保留对应的 `view-transition-name: div`，这样才能和旧元素正确匹配，完成平滑的视觉接力。

需要留意的几个细节

• 属性优先级：Ja vaScript 设置的 `element.viewTransitionName` 属性，其优先级高于 CSS 中的 `view-transition-name` 声明，这给了我们动态控制的绝对权力。
• 多元素协同：如果需要多个元素（如 div 和 article）一起动，记得在JS中为它们分别显式设置名称，并保证新旧两套节点间的命名严格一一对应。
• 浏览器兼容性：目前（Chrome 111+）该API仅在Chromium内核浏览器中得到支持。在生产环境中，务必做好特性检测和优雅降级方案。
• 声明位置：尽量避免在伪类（如 `:hover`）、媒体查询或CSS-in-JS的动态规则中声明 `view-transition-name`，因为过渡系统可能无法可靠地捕获到这些动态变化。

总而言之，采用这种“按需激活”的命名策略，你就能在鱼与熊掌间取得平衡：既能维护复杂界面中各模块过渡动画的独立性，又能确保在任何一次状态切换中，真正的视觉焦点元素始终处于最高层级。这样一来，由隐式层叠上下文引发的那些恼人的遮挡问题，也就迎刃而解了。