Które wbudowane transitions oferuje Svelte?

fadeIn, fadeOut, slideIn, slideOut

Jak ustawić różne animacje dla wejścia i wyjścia?

animation-in:fly animation-out:fade

Kurs Svelte i SvelteKit · Moduł 9: Przejścia i animacje

Ragnarök - Transitions i Animacje

2 min czytania · Zaktualizowano 13 sierpnia 2026

Udostępnij

W tej lekcji5

Witaj na polu Ragnarök! Tak jak zmierzch bogów przynosi spektakularne transformacje, tak Svelte oferuje potężne narzędzia do animacji.

Wbudowane transitions

<script>
  import { fade, fly, slide, scale, blur, draw } from 'svelte/transition';

  let visible = $state(true);
</script>

<button onclick={() => visible = !visible}>Toggle</button>

{#if visible}
  <div transition:fade>Fade</div>
  <div transition:fly={{ y: 200 }}>Fly</div>
  <div transition:slide>Slide</div>
  <div transition:scale>Scale</div>
  <div transition:blur={{ amount: 10 }}>Blur</div>
{/if}

Parametry transitions

<script>
  import { fly } from 'svelte/transition';
  import { cubicOut } from 'svelte/easing';
</script>

<div transition:fly={{
  x: 100,        // przesunięcie X
  y: -50,        // przesunięcie Y
  duration: 500, // czas trwania (ms)
  delay: 100,    // opóźnienie (ms)
  easing: cubicOut // funkcja easingu
}}>
  Animated!
</div>

in: i out: - Osobne animacje

<script>
  import { fade, fly } from 'svelte/transition';

  let visible = $state(true);
</script>

{#if visible}
  <div
    in:fly={{ y: -50, duration: 300 }}
    out:fade={{ duration: 200 }}
  >
    Przylatuje, znika płynnie
  </div>
{/if}

Przejścia lokalne i globalne

W Svelte 5 przejścia są domyślnie lokalne: grają tylko wtedy, gdy pojawia się lub znika blok, do którego bezpośrednio należą (np. ten {#if}), a nie przy zmianie bloku nadrzędnego. Jeśli chcesz, by grały zawsze, dodaj modyfikator |global:

<div transition:fade|global>Zawsze z animacją</div>

Przejścia nie grają też przy pierwszym renderze strony - animują dopiero późniejsze zmiany.

Eventy transitions

Zdarzenia przejść obsługujesz jak każde inne zdarzenie w Svelte 5 - atrybutami on...:

<div
  transition:fade
  onintrostart={() => console.log('Start wejścia')}
  onintroend={() => console.log('Koniec wejścia')}
  onoutrostart={() => console.log('Start wyjścia')}
  onoutroend={() => console.log('Koniec wyjścia')}
>
  Animowany element
</div>

Ragnarök to spektakl transformacji - tak jak Twoje animacje!

Kod do tej lekcji: App.svelte

<script>
  // Ragnarök - Koniec i początek, przejścia między stanami
  // transition: - wbudowane przejścia
  import { fade, fly, slide, scale, blur } from 'svelte/transition';

  let visible = $state(true);
  let selectedTransition = $state('fade');
</script>

<main class="ragnarok">
  <h1>Ragnarök - Transitions</h1>
  <p class="subtitle">Wbudowane przejścia Svelte</p>

  <section>
    <h2>Wybierz przejście</h2>
    <div class="options">
      {#each ['fade', 'fly', 'slide', 'scale', 'blur'] as t}
        <button
          class:active={selectedTransition === t}
          onclick={() => selectedTransition = t}
        >
          {t}
        </button>
      {/each}
    </div>

    <button class="toggle" onclick={() => visible = !visible}>
      {visible ? 'Ukryj' : 'Pokaż'}
    </button>
  </section>

  <div class="demo-area">
    {#if visible}
      {#if selectedTransition === 'fade'}
        <div class="box" transition:fade>
          fade - płynne zanikanie
        </div>
      {:else if selectedTransition === 'fly'}
        <div class="box" transition:fly={{ y: 100, duration: 500 }}>
          fly - wlatuje z dołu
        </div>
      {:else if selectedTransition === 'slide'}
        <div class="box" transition:slide>
          slide - zsuwanie
        </div>
      {:else if selectedTransition === 'scale'}
        <div class="box" transition:scale={{ start: 0.5 }}>
          scale - skalowanie
        </div>
      {:else if selectedTransition === 'blur'}
        <div class="box" transition:blur={{ amount: 10 }}>
          blur - rozmycie
        </div>
      {/if}
    {/if}
  </div>
</main>

<style>
  .ragnarok {
    font-family: 'Georgia', serif;
    max-width: 500px;
    margin: 0 auto;
    padding: 2rem;
    background: linear-gradient(135deg, #1a0a0a 0%, #2a0a1a 100%);
    color: #f7d5e8;
    min-height: 100vh;
  }

  h1 {
    color: #ff6b6b;
    text-align: center;
  }

  .subtitle {
    text-align: center;
    color: #a87ca8;
  }

  section {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid #ff6b6b;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
  }

  h2 {
    color: #ff6b6b;
    font-size: 1rem;
    margin-top: 0;
  }

  .options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  button {
    padding: 0.5rem 1rem;
    background: #3a1a2a;
    color: #f7d5e8;
    border: 1px solid #ff6b6b;
    border-radius: 4px;
    cursor: pointer;
  }

  button.active {
    background: #ff6b6b;
    color: #1a0a0a;
  }

  .toggle {
    width: 100%;
    padding: 0.75rem;
    font-size: 1.1rem;
  }

  .demo-area {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
  }

  .box {
    padding: 2rem;
    background: rgba(255, 107, 107, 0.2);
    border: 2px solid #ff6b6b;
    border-radius: 8px;
    text-align: center;
    color: #ffd700;
  }
</style>

Hasła z dokumentacji w tej lekcji

Widzisz błąd w tej lekcji?

Sprawdź się

Odpowiedz na pytania z tej lekcji. Wybierz odpowiedź, a od razu zobaczysz, czy jest poprawna.

1. Które wbudowane transitions oferuje Svelte?
2. Jak ustawić różne animacje dla wejścia i wyjścia?

Zadania praktyczne w grze

Edytor kodu
Uzupełnij kod, aby element pojawiał się z efektem fade