Blocul Logic {#key value} în Svelte în Svelte & SvelteKit

Reinițializarea forțată a componentelor și animațiilor

Blocul {#key} este extrem de util când doriți să forțați reluarea unei animații de tranziție (transition) sau reinițializarea stării interne a unei componente copil atunci când un ID sau un parametru se schimbă, fără a reîncărca întreaga pagină.

<script>
  import { fly } from 'svelte/transition';
  let articolCurent = $state({ id: 1, titlu: 'Primul Articol' });
</script>

{#key articolCurent.id}
  <div in:fly={{ y: 20, duration: 400 }}>
    <h1>{articolCurent.titlu}</h1>
  </div>
{/key}