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

Question

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

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

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

Answer 1

我假设您想使用 in: 自定义过渡。由于没有办法（据我所知）在元素上有条件地启用或禁用过渡，您可以向过渡函数发送一个自定义参数，指示它是否是第一次加载，如果是，您可以启用或禁用（即将持续时间设置为 0 或类似的东西）转换代码本身的转换。第一个加载变量可以是全局存储。

不推荐，但我看到的另一种方法是在第一个加载变量上有两个 if 块，因此您有两组 dom 代码，但一组没有 in: 转换。

Answer 2

您可以使用 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}

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

How to run animation only on first page visit

svelte

sveltekit

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