CODEWITHSUNDEEP
sveltesvelte-transition
user1249791
user1249791

Reputation: 1271

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}

Upvotes: 1

Views: 1993

Answers (1)

Corrl
Corrl

Reputation: 7741

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}

Upvotes: 7

Related Questions