Transition when cycling through store in Svelte?

Question

I have an element that displays text from an array from a store. It only shows the text from the 'current index'. I can click a button to change the 'current index' and the text that is displayed will change accordingly. Is it possible to use Svelte's transitions to fade the old text out and the new text in?

Answer 1

You can use a {#key} block to destroy and recreate an element when a value changes, which will allow you to run your transition.

<script>
    import { fade } from 'svelte/transition'
    import { readable } from 'svelte/store'
    
    let text = readable(["aaaa", "bbbb", "cccc", "dddd", "eeee"])
    let currentIndex = 0;
    
    let displayedText;
    $: displayedText = $text[currentIndex % $text.length]
</script>

{#key displayedText}
    <h1 in:fade>{displayedText}</h1>
{/key}

<button on:click={() => {currentIndex++}}>
    Next
</button>

Since we have a new element that's coming in to replace the old one, we need to only run the transition coming in to prevent having multiple elements at once.

Try this out in a Svelte REPL: https://svelte.dev/repl/01287c1714a44a2eb557d4a50f22ae2c?version=3.42.5