Key block behavior

[megashrieks]

Hi, I'm going through the Svelte tutorial and in the Key block lesson

The lesson states that whenever the expression in the Key changes, the block is destroyed and recreated.

In the example the following code is shown, which works great

{#key i}
	<p in:typewriter={{ speed: 10 }}>
		{messages[i] || ''}
	</p>
{/key}

However I was experimenting and found that the following code behaves strangely

{#key i < 5}
	<p in:typewriter={{ speed: 10 }}>
		{messages[i] || ''}
	</p>
{/key}

The expectation is that the typewriter animation is triggered on index == 5 and when snapping back to index == 0

But the message is not updated in the <p> after index 5 and it snap back to 0 later. Is this the expected behavior?

[brunnerh]

Kind of.

The typewriter transition breaks Svelte's regular DOM update, so with the #key not acting on every message change, this does not work properly.

Try switching the transition to fade (from 'svelte/transition') and the text will update but the fade only happens at the expected index changes.