面试题：Svelte组件动画的复杂过渡场景实现

Question

假设有一个包含多个列表项的Svelte组件，当某个列表项被点击时，希望该项以旋转并放大的动画效果消失，同时其他列表项以淡入的动画效果重新排列。请描述实现该功能的思路，并给出关键代码片段。

Answer 1

实现思路

1. 状态管理：在Svelte组件中定义一个数组来存储列表项数据，同时定义一个变量来记录当前被点击的列表项索引。
2. 动画处理：使用Svelte的 transition 功能来实现动画效果。对于被点击的列表项，使用旋转和放大的动画，然后移除该项；对于其他列表项，使用淡入动画重新排列。
3. 事件绑定：在每个列表项上绑定点击事件，触发动画和状态更新。

关键代码片段

<script>
    let items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
    let clickedIndex = null;

    const handleClick = (index) => {
        clickedIndex = index;
        setTimeout(() => {
            items = items.filter((_, i) => i!== index);
            clickedIndex = null;
        }, 500); // 动画时长后移除该项
    };

    const fadeIn = {
        duration: 500,
        easing: 'ease-in-out',
        css: (t) => `opacity: ${t}`
    };

    const spinAndScaleOut = {
        duration: 500,
        easing: 'ease-in-out',
        css: (t) => `
            opacity: ${1 - t};
            transform: rotate(${360 * t}deg) scale(${1 + t});
        `
    };
</script>

<ul>
    {#each items as item, index}
        {#if clickedIndex === index}
            <li transition:spinAndScaleOut on:click={() => handleClick(index)}>{item}</li>
        {:else}
            <li transition:fadeIn on:click={() => handleClick(index)}>{item}</li>
        {/if}
    {/each}
</ul>