Tranziția slide în Svelte: animarea fluidă a înălțimii elementelor retractabile în Svelte & SvelteKit

Directiva de tranziție `transition:slide` din pachetul `svelte/transition` animează fluid apariția și dispariția elementelor prin expandarea sau comprimarea înălțimii lor verticale. Este tranziția standard pentru meniuri acordeon, panouri retractabile (drawers) și notificări de tip banner.

Animație Nativă de Înălțime cu Parametri Ajustabili

Suportă configurarea duratei (`duration`), întârzierii (`delay`), funcției de easing și a direcției de glisare (`axis: ‘y’ | ‘x’`).

<script>
  import { slide } from 'svelte/transition';
  import { quintOut } from 'svelte/easing';

  let isOpen = $state(false);
</script>

<button onclick={() => isOpen = !isOpen}>
  {isOpen ? 'Ascunde Detalii' : 'Afișează Detalii'}
</button>

{#if isOpen}
  <div transition:slide={{ duration: 400, easing: quintOut }} class="accordion-content">
    <p>Conținutul acestui panou este animat fluid la nivel de înălțime fără salturi vizuale.</p>
  </div>
{/if}

Implementarea acestei tehnologii în aplicațiile Svelte și SvelteKit asigură o reactivitate predictibilă, performanțe de randare maxime și o experiență interactivă impecabilă.