Sveltekit如何实现元素X秒后淡出？需setInterval相关示例

你不需要用setInterval（它用于重复执行任务），用单次延迟执行的setTimeout就能满足需求，同时给元素加上退出过渡即可实现自动淡出效果，修改后的代码如下：

<script>
    import { fade } from 'svelte/transition';
    let visible = false;
    // 定义延迟秒数，比如3秒
    const delaySeconds = 3;

    const showAndFade = () => {
        visible = true;
        // 延迟指定秒数后隐藏元素
        setTimeout(() => {
            visible = false;
        }, delaySeconds * 1000);
    }
</script>

<button on:click={showAndFade}>
    Button  
</button>

{#if visible}
    <p in:fade out:fade>
        Hello World
    </p>
{/if}

关键说明 #

• 给<p>标签添加out:fade，让元素隐藏时触发淡出过渡
• setTimeout接收两个参数：要执行的回调函数，以及延迟的毫秒数（所以要把秒数乘以1000转换）
• 把逻辑封装到showAndFade函数里，代码更清晰

内容的提问来源于stack exchange，提问作者Tadas V.