如何在属性变更时为Svelte应用淡入淡出过渡效果？

你当前代码里用的Svelte fade过渡只作用于元素挂载/卸载阶段，但你的圆形元素始终存在，只是fill-opacity属性动态变化，所以得改用属性过渡来实现平滑效果。

修改后的代码 #

<script>
    let year = 2020;
    let items = [5, 10, 20, 40];
    let years = [2020, 2021, 2022];
</script>

<label>
    <input type=radio bind:group={year} name="year" value={2020}>
    2020
</label>
<label>
    <input type=radio bind:group={year} name="year" value={2021}>
    2021
</label>
<label>
    <input type=radio bind:group={year} name="year" value={2022}>
    2022
</label>
<svg style="width: 100%; height: 100%;">
    {#each years as yearRow, yearIndex}
        {#each items as radius, itemIndex}
            <circle 
                cx={100 + itemIndex * 50} 
                cy={50 + yearIndex * 100} 
                r={radius}
                fill="blue"
                fill-opacity={year == yearRow ? 0.6 : 0.1}
                style="transition: fill-opacity 0.5s ease;"
            >
            </circle>
        {/each}
    {/each}
</svg>

关键调整说明 #

• 移除原代码里的transition:fade，它不适合元素属性动态变更的场景
• 给<circle>添加内联样式transition: fill-opacity 0.5s ease;，指定fill-opacity属性的过渡时长为0.5秒，过渡曲线为缓动效果
• 切换年份时，对应组的透明度会平滑过渡到目标值，自然实现高亮组淡入、非高亮组淡出的效果

你可以根据需求修改0.5s调整过渡速度，或者把ease换成linear、ease-in-out等其他过渡曲线。

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