Svelte transitions

SvelteKit предоставляет мощные инструменты для работы с анимацией и переходами компонентов через встроенную систему transitions. Они позволяют управлять появлением, исчезновением и изменением состояния элементов без сложной работы с CSS или внешними библиотеками.

Основы transitions

В SvelteKit переходы реализуются через директиву transition:. Синтаксис выглядит следующим образом:

<div transition:fade>
    Контент с плавным появлением
</div>
  • fade — один из встроенных переходов.
  • Переход автоматически срабатывает при mounting и unmounting компонента.
  • Для переходов можно передавать параметры, такие как duration или delay.
<div transition:fade={{ duration: 500, delay: 200 }}>
    Появление через полсекунды с задержкой
</div>

Встроенные переходы

SvelteKit поставляется с набором стандартных переходов, которые покрывают большинство базовых сценариев:

  1. fade — плавное появление и исчезновение через изменение прозрачности.
  2. slide — перемещение элемента с края контейнера с одновременным изменением прозрачности.
  3. scale — масштабирование элемента при появлении/исчезновении.
  4. fly — комбинированное перемещение и изменение прозрачности с возможностью задать направление и скорость.

Пример использования fly:

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

<div transition:fly={{ x: 200, y: 0, duration: 400 }}>
    Летающий элемент
</div>

Параметры перехода fly:

  • x и y — смещение по горизонтали и вертикали.
  • duration — длительность в миллисекундах.
  • delay — задержка перед началом анимации.
  • easing — функция easing (например, cubicInOut из svelte/easing).

Пользовательские переходы

Создание собственного перехода осуществляется через функцию, которая возвращает объект с параметрами CSS-анимации. Стандартная сигнатура:

function myTransition(node, params) {
    return {
        duration: 400,
        css: t => `transform: scale(${t}); opacity: ${t}`
    };
}

Использование:

<div transition:myTransition>
    Кастомный переход
</div>
  • node — HTML-элемент, к которому применяется переход.
  • params — объект параметров, переданный пользователем.
  • t — прогресс анимации от 0 до 1.

Можно комбинировать несколько эффектов, создавая сложные анимации с изменением прозрачности, масштаба, позиции и других свойств.

Использование анимаций при условных блоках

Transitions идеально работают с условными конструкциями if и each:

{#if visible}
    <p transition:slide>{{message}}</p>
{/if}
  • При появлении блока срабатывает in-transition.
  • При удалении блока — out-transition.
  • Можно задавать разные переходы для входа и выхода через директивы in: и out::
<p in:fade={{ duration: 300 }} out:fly={{ x: 100, duration: 500 }}>
    Комбинированный переход
</p>

Настройка easing и синхронизации

SvelteKit поддерживает функцию easing из модуля svelte/easing:

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

<div transition:scale={{ duration: 500, easing: cubicOut }}>
    Плавное масштабирование
</div>
  • Easing позволяет задавать ускорение и замедление анимации.
  • Можно использовать предопределённые функции (linear, cubicIn, backOut) или создавать собственные кривые.

Для синхронизации нескольких элементов можно использовать grouped transitions с delay и stagger:

{#each items as item, index}
    <div transition:fade={{ delay: index * 100 }}>
        {item}
    </div>
{/each}
  • Каждый элемент появляется с небольшим интервалом.
  • Стратегия staggered animation делает интерфейс более динамичным.

Transition + Motion

SvelteKit позволяет комбинировать transitions с motion (motion stores) для более сложных взаимодействий. Пример:

<script>
    import { tweened } from 'svelte/motion';
    import { cubicInOut } from 'svelte/easing';

    let x = tweened(0, { duration: 400, easing: cubicInOut });
</script>

<div style="transform: translateX({$x}px)" transition:fade>
    Двигающийся элемент с переходом
</div>
  • Плавное перемещение элементов с одновременным изменением прозрачности.
  • Используется для динамического контента и интерактивных интерфейсов.

Рекомендации по производительности

  • Использовать transitions только для значимых элементов интерфейса.
  • Минимизировать вложенные анимации на одной странице.
  • Предпочитать CSS-свойства, которые GPU может анимировать (transform, opacity) вместо width, height.
  • В сложных интерфейсах комбинировать transitions и animations для оптимизации рендеринга.

Итоговый паттерн использования

  1. Встроенные переходы для базовых анимаций.
  2. Кастомные функции для уникальных эффектов.
  3. Комбинации in/out для условного отображения элементов.
  4. Easing и stagger для плавности и синхронизации.
  5. Motion + transition для динамических и интерактивных интерфейсов.

Этот подход обеспечивает чистый, декларативный код, упрощает поддержку анимаций и полностью использует возможности SvelteKit UI для создания современных интерфейсов.

Оглавление