svelte - 如何仅在第一页访问时运行动画

Question

在我目前正在构建的 sveltekit 网站上，如果它是应用程序的入口点，我想在索引页面上播放一个简单的介绍动画。如果用户使用导航加载索引页面，则不应播放动画。

所以我正在寻找一种简单的方法来检测页面是否是该 session 的入口点。

这是一个具有此类功能的示例页面 reed.be/

Answer 1

你可以使用 SvelteKit's afterNavigate检测当前导航的来源。仅当它不是来自同一域中的另一个页面时才显示动画。索引页可能如下所示:

<script>
    import { afterNavigate } from '$app/navigation';
    import { fade } from 'svelte/transition';

    // hide by default
    let visible = false;

    let duration;

    afterNavigate(({ from }) => {
        // only animate if the navigation came from outside the page
        duration = from === null ? 600 : 0;
        // toggle visbility in any case
        visible = true;
    });
</script>

{#if visible}
    <h1 in:fade={{ duration }}>Welcome to SvelteKit</h1>
{/if}