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?