Search code examples
sveltesvelte-transition

Svelte transition on an #each block

Using svelte I am trying to implement a fly transition in an {#each} block. Is that possible?

See below the important code that can be also found in this REPL

{#if visible}
  {@const i=1000}
  <div in:fly={{ y: 50, duration:i, delay: 100, easing: cubicOut }}>
    test234
  </div>
  <div in:fly={{ y: 50, duration:i, delay: 100, easing: cubicOut }}>
    test234
  </div>
  {#each values as value (value.i)}
    <div  in:fly={{ y: 50, duration: value.i*300, delay: 100, easing: cubicOut }}>
      {value.val} and i is {value.i}
    </div>
  {/each}
{/if}
Solution

  • Since Svelte 4 Transitions are local by default
    Adding the |global flag will make it work (and instead of mapping the values, the index of the #each block could be used)

      {#each values as value, index}    
    <div  in:fly|global={{ y: 50, duration: index*300, delay: 100, easing: cubicOut }}>
      {value.val} and i is {value.i}
    </div>
  {/each}