Transitions for reactive data changes

[etienneburdet]

I often want my element to transition when the data inside changes. For exemple : 

<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>

It would be nice if the count could transition each time. But since the node is not remodev/added, no transition is triggered (I guess).

An answer on stack overflow suggested to add a fake {#each} block, but it sounds a bit bloated and unnatural. The alternative would be to trigger animations from the JS function, e.g. by adding classes. It seems waaaaay more complicated than transitionning with conditionals, while doing functionnally something pretty similar to transitions (unless I am missing something obvious…).

So it would be awesome if transition was working on reactive data change as well. It cannot be the syntax I describe (else what happens when we actually kill the node?), but something similar, like {count | transition:fade} would be great.

Right now I need it for a calendar (slide weeks in/out of the screen), but there many use cases I can think of (counters, corrected data etc.).

[Conduitry]

This sounds like a duplicate of #1469.

[etienneburdet]

Most likely yes (I searched only issues with "transition…). Having the ability to force recreate the node would solve most (all?) cases for transitions. I am not skilled enough to be sure though 😛 .

[antony]

Closing as duplicate of #1469