Svelte if-else connecting transitions

I have a page that has several stages, and I want to add transitions between them.

{#if state === 1}<div class="red" transition:fade/>{:else if state === 2}<div class="blue" transition:fade/>{:else if state === 3}<div class="green" transition:fade/>{/if}

However, when switching from one state to the next, the next one appears at the same time as the previous one is still disappearing, so the two states would appear at the same time for the duration of the transition.

What is the best approach (the approach that requires adding the least amount of code) to make one state's fade in connect with another state's fade out?

Here is a code sandbox link: https://codesandbox.io/p/sandbox/priceless-pine-kgrh7w