SvelteKit中如何延迟<slot />旧内容的消失时间？

要实现离开页面时真实内容延迟1秒消失、进入页面立刻加载真实内容的效果，可以通过跟踪页面的离开状态来调整内容渲染逻辑：

1. 添加状态记录离开的页面
   在+layout.svelte中声明响应式数组，用来存储刚离开的页面标识：

<script>
  import { beforeNavigate, page } from '$app/stores';
  import { isUrlLeadingToMainPage } from '$lib/your-utils-file'; // 替换为你的工具函数路径

  let mainPages = [...]; // 你的页面列表数据
  let shownPageIndex = 0; // 你的当前页面索引逻辑
  let leavingPages = [];

  // 监听导航开始事件
  beforeNavigate(({ from }) => {
    if (!from) return;
    // 匹配当前离开的页面对应的mainPage
    const leavingPage = mainPages.find(page => isUrlLeadingToMainPage(from.url.pathname, page));
    if (leavingPage && !leavingPages.includes(leavingPage.name)) {
      leavingPages = [...leavingPages, leavingPage.name];
      // 1秒后移除延迟标记
      setTimeout(() => {
        leavingPages = leavingPages.filter(name => name !== leavingPage.name);
      }, 1000);
    }
  });
</script>

2. 修改内容渲染的条件判断
   调整#if逻辑：当前页面是活跃页，或者处于离开延迟列表中时显示真实内容，否则显示假内容：

<div class="pages" style:--shownPageIndex={shownPageIndex}>
  {#each mainPages as mainPage, pageIndex (mainPage.name)}
    <div class="page" style:--pageIndex={pageIndex}>
      {#if isUrlLeadingToMainPage($page.url.pathname, mainPage) || leavingPages.includes(mainPage.name)}
        <h1>{mainPage.name}</h1>
        <slot />
      {:else}
        <div class="fakedPageContent">
          <h1>{mainPage.name}</h1>
          <p>This is the faked content...</p>
        </div>
      {/if}
    </div>
  {/each}
</div>

关键逻辑说明 #

• 触发导航时，beforeNavigate会捕获离开的页面，将其标识加入leavingPages并启动1秒定时器，到期后移除该标识。
• 渲染时，只要页面是当前活跃页或刚离开的延迟页，就保留真实内容；其余页面显示假内容。
• 进入新页面时，isUrlLeadingToMainPage会立刻返回true，新页面直接加载真实内容，满足需求。

内容的提问来源于stack exchange，提问作者Peppe L-G