Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

Transition delay ignored in loop

$
0
0

There is a component that has fade transition with delay applied. Works as expected unless it is put inside a loop. In that case it ignores the delay property.

Code of the component:

<div in:fade={{ delay: delayPlus(), duration: 1500 }}><p>{word}</p></div>

Delay value incrementor:

function delayPlus() {    let delay: number = 0;    count.subscribe((value) => (delay = value));    count.update(() => delay + (Math.floor(Math.random() * 451) + 50));    return delay;}

Components are rendered in respect to the delay property when used as:

<div in:fade={{ delay: delayPlus(), duration: 1500 }}><p>{words[0]}</p></div><div in:fade={{ delay: delayPlus(), duration: 1500 }}><p>{words[1]}</p></div><div in:fade={{ delay: delayPlus(), duration: 1500 }}><p>{words[2]}</p></div><div in:fade={{ delay: delayPlus(), duration: 1500 }}><p>{words[3]}</p></div>

However if they are rewritten into a loop they appear immediately respecting only the duration property:

{#each words as word}<div in:fade={{ delay: delayPlus(), duration: 1500 }}><p>{word}</p></div>{/each}

Is this a standard behaviour? What is the catch to make the loop behave as expected in first example?


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>