我在遵循这里的逻辑 Cross-document view transitions for multi-page applications。

自初次页面加载以来，DOM已经改变。我的理解是，JavaScript视图切换使用最新的DOM，而跨文档视图切换使用初始的DOM。我是不是理解错了？

上面的链接说：

• pageswap 事件在页面的最后一帧渲染之前触发。你可以用它在离开的页面上进行一些最后一刻的修改，恰在旧快照被拍摄之前。

它甚至给出一个如何相应地修改DOM的示例。

我的理解促使我按如下操作：

window.addEventListener('pageswap', (e) => {
    if (e.viewTransition) {
        const main = document.querySelector('main');
        main.style.viewTransitionName = 'none';
                // restore for the bfcache
        e.viewTransition.finished.then(() => {
            main.style.viewTransitionName = '';
        });
    }
});

虽然

const main = document.querySelector('main');
        main.style.viewTransitionName = 'none';

对于JavaScript视图切换而言，const main = document.querySelector('main'); main.style.viewTransitionName = 'none'; 能工作，但对于跨文档视图切换似乎并不奏效。主元素仍然以相同的方式进行动画。

解决方案

我以为只处理 pageswap 就足够了，但你还需要处理 pagereveal。