Astro个人站点视图过渡动画在Chrome表现异常，Firefox/Safari正常的问题求助

大家好，我正在用Astro搭建个人作品集网站，已经启用了View Transitions，还给页面上的持久化头部绑定了GSAP动画。我的核心需求是：在页面导航时，要等页面切换完成（也就是astro:after-swap事件触发后），再关闭当前打开着的导航菜单。具体的流程应该是这样的：

打开菜单 → 点击页面链接 → 切换页面 → 页面切换完成后关闭菜单

但现在遇到了一个跨浏览器的不一致问题：在Firefox和Safari里这个逻辑都能按预期工作，但在Chrome里，astro:after-swap触发的函数似乎在DOM完全切换完成前就执行了，而且页面间的过渡感觉比设置的更快（哪怕我已经把过渡时长设为0.6s），新页面的内容会在过渡过程中和头部区域重叠，体验很糟糕。

下面是相关的代码片段：

主布局文件（src/.../Layout.astro） #

<html>
  ...
  <body>
    {header ? <Navbar /> : <slot name="header" />}
    <main>
      <div id="content" transition:animate={fade({ duration: '0.6s' })}>
        <slot />
      </div>
    </main>
  </body>
</html>

Navbar组件（src/.../navbar.astro） #

<header id="masthead" style="z-index:999999999999;" transition:persist="masthead" transition:persist-props>
  ...
  {/* 导航菜单容器 */}
  <div data-nav="closed" id="nav">
    ...
  </div>
</header>

<script>
  import { toggleMenu } from './navScript.ts'
  toggleMenu()
</script>

导航逻辑脚本（src/.../navScript.ts） #

export function toggleMenu() {
  let navWrap = document.getElementById('nav')
  let state = navWrap?.getAttribute('data-nav')
  ...

  const closeNav = () => {...} // 这里是关闭菜单的具体逻辑

  document.addEventListener('astro:after-swap', () => {
    const currentState = document.getElementById('nav')?.getAttribute('data-nav')
    if (currentState === 'open') {
      closeNav()
    }
  })
}

我还录制了三个浏览器的屏幕录像，能清晰看到差异：

• Firefox中的正常表现
• Safari中的正常表现
• Chrome中的异常表现

有没有大佬能帮忙分析下这个问题的原因，或者给点可行的解决建议呀？

内容来源于stack exchange