跨文档视图过渡是否采用初始DOM？pageswap事件修改viewTransitionName无效问题咨询

首先，你的理解存在部分偏差：

• JavaScript视图过渡（单页内的document.startViewTransition()）确实会使用触发过渡时的最新DOM状态来生成新旧快照。
• 跨文档视图过渡（导航触发的过渡）并不是使用页面初始加载的DOM，而是会在pageswap事件触发时，拍摄当前旧页面的最新DOM状态快照——也就是导航发起时页面的实时状态，而非页面刚加载完成时的初始状态。

你在pageswap中同步修改viewTransitionName为none，但跨文档过渡场景下，浏览器可能在样式变更还未完全应用到渲染树时就完成了快照拍摄。这是因为JavaScript执行和浏览器渲染是交替进行的，同步修改样式后，浏览器需要等待下一个渲染帧才能更新视图，但pageswap事件后的快照拍摄可能并未等待这个渲染帧完成。

另外可以排查一个细节：如果你的main元素的viewTransitionName是通过CSS类设置的（而非内联样式），直接设置内联样式的none可能会被CSS优先级覆盖——不过你提到单页场景下生效，这个可能性较低，但可以快速验证。

你可以通过requestAnimationFrame延迟DOM修改，确保样式变更被渲染后再让浏览器拍摄快照：

window.addEventListener('pageswap', (e) => {
  if (e.viewTransition) {
    requestAnimationFrame(() => {
      const main = document.querySelector('main');
      main.style.viewTransitionName = 'none';
      // 为bfcache恢复原始设置
      e.viewTransition.finished.then(() => {
        main.style.viewTransitionName = '';
      });
    });
  }
});

requestAnimationFrame会把你的修改放到下一个渲染帧执行，这样浏览器会先应用样式变更，再拍摄旧页面的快照，就能让viewTransitionName: none生效，避免main元素参与过渡动画。

你也可以在pageswap事件中添加console.log(main.style.viewTransitionName)，确认修改是否真的被应用，同时检查浏览器控制台是否有报错（比如main元素是否被正确选中）。

内容的提问来源于stack exchange，提问作者Yousef El-Zebdeh