如何避免Svelte中onMount首次渲染时触发过渡动画？

问题 #

使用Svelte 3.55.0开发时，初始页面因无items数据为空，onMount触发后从API获取items并渲染。但首次加载的约50个items会触发slide过渡动画，希望禁用首次渲染的过渡，保留单个项增删时的过渡效果。

现有代码如下：

<script>
import { slide } from "svelte/transition";
import { onMount } from "svelte";

// Initially we have no items.
let items = [];
let id = 0;

onMount(() => {
    // Fetch items from API.
    items = [
        {id: id, name: `item ${id++}`},
        {id: id, name: `item ${id++}`},
        {id: id, name: `item ${id++}`},
    ];
});

function addItem() {
    items = [
        ...items,
        {id: id, name: `item ${id++}`},
    ];
}
</script>

<div>
    <button on:click={addItem}>add</button>
    {#each items as it (it.id)}
        <div transition:slide>
            <p>{it.id} {it.name}</p>
        </div>
    {/each}
</div>

解决方案 #

通过新增一个状态变量标记首次渲染状态，就能精准控制过渡的启用时机，具体实现如下：

• 新增isFirstRender变量，初始值设为true，用来标记当前是否处于首次渲染阶段；
• 在onMount获取完API数据后，把isFirstRender改为false；
• 在列表项的过渡指令中加条件判断，只有非首次渲染时才应用slide过渡。

修改后的完整代码：

<script>
import { slide } from "svelte/transition";
import { onMount } from "svelte";

let items = [];
let id = 0;
let isFirstRender = true; // 标记首次渲染状态

onMount(() => {
    // 模拟API获取数据
    items = [
        {id: id, name: `item ${id++}`},
        {id: id, name: `item ${id++}`},
        {id: id, name: `item ${id++}`},
    ];
    // 数据加载完成，关闭首次渲染标记
    isFirstRender = false;
});

function addItem() {
    items = [
        ...items,
        {id: id, name: `item ${id++}`},
    ];
}
</script>

<div>
    <button on:click={addItem}>add</button>
    {#each items as it (it.id)}
        <!-- 条件控制过渡：首次渲染不生效，后续增删正常触发 -->
        <div transition:isFirstRender ? undefined : slide>
            <p>{it.id} {it.name}</p>
        </div>
    {/each}
</div>

原理很直白：

• 首次渲染时isFirstRender为true，过渡指令设为undefined，不会触发任何动画；
• 等API数据加载完成后，isFirstRender切换为false，之后新增或删除列表项时，slide过渡就会正常生效。

内容的提问来源于stack exchange，提问作者425nesp