Using svelte blur transition without an event as such

So the other day you were updating a Svelte Store (but it’s the same for Runes now the whole thing is a new version) and you’re making the update animate (transition) something else on the page, and while everything is in different components and the click event is on a different element you were, like , uuuhhhhh. ‘Cos all the examples in the REPL use buttons with events directly attached, like check-boxes.

So the key to having the Svelte transition and easing fire on the variable changing (in this case it’s an array of values elsewhere in the app) was the subscriber (that you won’t need with Runes) and the #key block.
So when the Store changes, or in your case the Rune because it’s not 2023 anymore, the subscribe gets the new value and the change fires the transition because the #key links the variable you gave it as an arg.

<script>
    import data from '../data/database.json';
    import SignList from '../components/ SignList.svelte';
    import { totalCount } from '../stores/countStore';
    import { blur } from 'svelte/transition';
    import { cubicIn } from 'svelte/easing';

    const jsonData = [...data];

    /**
    * @type {number}
    */
    let totalCountVal;
    totalCount.subscribe(value => {
        if (value === 0 ) {
            totalCount.set(0);
        }
        totalCountVal = value;
    });
</script>

<article>
    <div class="section-wrapper">
        <section class="total-legs">
            {#key totalCountVal}
                <span 
                    out:blur={{ delay: 0, duration: 100,  easing: cubicIn, opacity: 0, amount: "2rem" }}
                    in:blur={{ delay: 0, duration: 800,  easing: cubicIn, amount: "1rem" }}
                >
                    {totalCountVal}
                </span>  

            {/key}
        </section>
    </div>
    <section class="signlist-wrapper">
        <SignList signData={jsonData} />
    </section>
</article>

Side note: using separate in and out works smoother than combining them into a single transition that caused janky animations when the element is destroyed and created in the same space.