面试题：Svelte过渡效果中的延迟与持续时间的综合运用

Svelte 代码实现每个元素依次延迟出现并伴有淡入过渡效果：
```
<script>
    import { fade } from'svelte/transition';
    const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
</script>

{#each items as item, index}
    <div
        transition:fade={{
            duration: 1000,
            delay: index * 200
        }}
    >
        {item}
    </div>
{/each}
```
- 在上述代码中，我们从 svelte/transition 导入了 fade 过渡效果。
- 使用 #each 块来遍历 items 列表。
- 对于每个 div 元素，我们应用 fade 过渡效果，并通过 duration 设置淡入时间为1秒（1000毫秒），通过 delay 设置延迟时间，每个元素的延迟时间为其索引值乘以0.2秒（200毫秒）。

处理过渡效果完成后的回调操作：

<script>
    import { fade } from'svelte/transition';
    const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
    function onTransitionComplete(index) {
        console.log(`Transition for item at index ${index} completed`);
        // 这里可以添加任何你想要在过渡完成后执行的操作，比如更新数据、触发其他函数等
    }
</script>

{#each items as item, index}
    <div
        transition:fade={{
            duration: 1000,
            delay: index * 200,
            onComplete: () => onTransitionComplete(index)
        }}
    >
        {item}
    </div>
{/each}

我们定义了一个 onTransitionComplete 函数，该函数接收元素的索引作为参数。
在 fade 过渡效果的配置对象中，通过 onComplete 属性指定了过渡完成后的回调函数，这里调用了 onTransitionComplete 函数，并传入当前元素的索引值。在 onTransitionComplete 函数内部，你可以根据需求编写在过渡完成后执行的逻辑，例如记录日志、更新数据或触发其他函数等操作。

星途面试题库

面试题：Svelte过渡效果中的延迟与持续时间的综合运用

知识考点

面试题答案