Apply Svelte Transition on change of attribute

I have a visualisation where the UI indicates which set of svg elements (circles) should be highlighted. So I set the opacity if each set based on whether its set number is the one to be highlighted. I have a simple version of it below.

I'd like to apply a fade transition each time the opacity changes (so the one coming in fades in slowly and the one going out fades out slowly).

<script>
    import { fade } from 'svelte/transition';
    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 transition:fade
                            cx={100 + itemIndex * 50} 
                            cy={50 + yearIndex * 100} 
                            r = {radius}
                            fill = "blue"
                            fill-opacity={year == yearRow?0.6:0.1}
                            >
            </circle>
        {/each}
    {/each}
</svg>

https://svelte.dev/repl/3a8e778e3b2f467cb054f0170ce1e561?version=3.54.0

Those transitions are for when elements are added to/removed from the DOM. The easiest way to do this is with a simple CSS transition:

<circle class:selected={yearRow == year} ... />

<style>
    circle {
      transition: fill-opacity 0.2s ease;
      fill-opacity: 0.6;
    }
    circle.selected { fill-opacity: 1; }
</style>

REPL