面试题：Svelte 过渡效果在动态列表加载中的实现方式

Question

在 Svelte 中，假设你有一个动态加载的列表，当新的列表项添加进来时，如何使用 Svelte 的过渡效果为新添加的列表项添加淡入效果？请简述实现步骤并给出关键代码示例。

Answer 1

1. 实现步骤：
   • 首先，需要在 Svelte 组件中引入过渡效果模块。Svelte 内置了一些过渡效果，淡入效果常用 fade。
   • 然后，在动态加载列表的代码中，为列表项添加过渡效果。这通常在渲染列表项的 {#each} 块中进行。
2. 关键代码示例：

<script>
    import { fade } from'svelte/transition';
    let items = [];
    function addItem() {
        items = [...items, `New Item ${items.length + 1}`];
    }
</script>

<button on:click={addItem}>Add Item</button>

<ul>
    {#each items as item, index}
        <li transition:fade>{item}</li>
    {/each}
</ul>

在上述代码中，通过 import { fade } from'svelte/transition'; 引入了淡入过渡效果 fade。在 {#each} 循环渲染列表项 <li> 时，使用 transition:fade 为每个新添加的列表项添加淡入效果。每次点击按钮调用 addItem 函数时，新的列表项就会以淡入的过渡效果显示出来。