Svelte: переход на реактивное изменение данных

Question

Как лучше всего запускать анимацию при изменении реактивной переменной? Я бы хотел сделать что-то подобное:

<script>
    import { fade } from 'svelte/transition'
    let count = 0;
    const handleClick = () => count +=1
</script>

<button on:click={handleClick} transition:slide>
    Click me
</button>
<p> You cliked <strong transition:fade>{count}</strong> times</p>

Что не работает, потому что <strong>узел не удаляется из DOM (я думаю). Итак, как лучше всего добиться того, чтобы числа исчезали и исчезали при изменении?

Answer 1

Попробуй это:

<script>
    import { fade } from 'svelte/transition'
    let count = 0;
    const handleClick = () => count +=1
</script>

<button on:click={handleClick}>
    Click me
</button>
<p> You cliked 
    {#each [count] as c (c)}
    <strong in:fade>{c}</strong> 
    {/each}
    times</p>

REPL