Svelte/animate модуль

Модуль svelte/animate предназначен для создания анимаций при изменении DOM-элементов после их появления или перемещения в документе. В отличие от svelte/transition, который применяется при монтировании или размонтировании элементов, svelte/animate фокусируется на анимации между состояниями уже существующих элементов.

Основные функции

flip

flip (First-Last Invert Play) — основная функция модуля svelte/animate. Она позволяет анимировать перемещения элементов при изменении их позиции в DOM, используя технику, которая минимизирует визуальные скачки.

Синтаксис:

import { flip } from 'svelte/animate';

<div animate:flip>
  {#each items as item (item.id)}
    <div>{item.text}</div>
  {/each}
</div>

Пояснения:

  • Атрибут animate:flip применяется к контейнеру, в котором изменяются позиции элементов.
  • (item.id) — ключ, необходимый для отслеживания идентичности элементов при рендеринге списка.
  • Функция flip вычисляет разницу между предыдущим и текущим положением элементов и плавно анимирует их перемещение.

Настройки flip:

animate:flip={{ duration: 400, easing: cubicOut }}
  • duration — длительность анимации в миллисекундах.
  • easing — функция сглаживания движения (linear, cubicIn, cubicOut и т.д.).

Интеграция с each и ключами

Чтобы анимация перемещений работала корректно, каждый элемент списка должен иметь уникальный ключ:

{#each todos as todo (todo.id)}
  <div animate:flip>{todo.text}</div>
{/each}

Если ключи отсутствуют, Svelte не сможет точно сопоставить элементы между рендерами, что приведёт к нежелательной анимации.

Кастомизация анимации

flip поддерживает расширенные опции для управления движением элементов:

animate:flip={{
  duration: 500,
  easing: cubicOut,
  delay: 100,
  x: true,  // анимация по горизонтали
  y: true,  // анимация по вертикали
  opacity: 0.5  // изменение прозрачности при движении
}}
  • delay — задержка перед началом анимации.
  • x и y — включение/отключение анимации по соответствующей оси.
  • opacity — задаёт степень изменения прозрачности при перемещении.

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

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

Анимация перестановки элементов списка

<script>
  import { flip } from 'svelte/animate';
  let items = ['A', 'B', 'C', 'D'];

  function shuffle() {
    items = items.sort(() => Math.random() - 0.5);
  }
</script>

<button on:click={shuffle}>Перемешать</button>

<div animate:flip={{ duration: 600, easing: cubicOut }}>
  {#each items as item (item)}
    <div class="box">{item}</div>
  {/each}
</div>

<style>
  .box {
    width: 50px;
    height: 50px;
    background: #3498db;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
    border-radius: 4px;
  }
</style>

Элементы плавно смещаются при каждом нажатии на кнопку, сохраняя визуальную последовательность.

Анимация скрытия и появления с использованием flip

Модуль svelte/animate совместим с динамическими списками, где элементы добавляются и удаляются. В сочетании с svelte/transition можно добиться эффектного движения и плавного исчезновения:

<script>
  import { flip } from 'svelte/animate';
  import { fade } from 'svelte/transition';

  let todos = [
    { id: 1, text: 'Купить хлеб' },
    { id: 2, text: 'Позвонить маме' },
    { id: 3, text: 'Сделать задачу' }
  ];

  function removeTodo(id) {
    todos = todos.filter(todo => todo.id !== id);
  }
</script>

<div animate:flip>
  {#each todos as todo (todo.id)}
    <div transition:fade>{{todo.text}}
      <button on:click={() => removeTodo(todo.id)}>x</button>
    </div>
  {/each}
</div>

При удалении элемента происходит плавное исчезновение (fade) и одновременная анимация перемещения оставшихся элементов (flip).

Лучшие практики

  • Всегда использовать ключи для элементов списков, чтобы flip мог правильно анимировать перемещения.
  • Комбинировать с transition, когда нужно анимировать вход/выход элементов.
  • Подбирать функцию сглаживания (easing) и длительность так, чтобы движение выглядело естественно.
  • Ограничивать количество одновременно анимируемых элементов для производительности на слабых устройствах.
  • Использовать flip для сложных интерфейсов: таблицы, карточки, канбан-доски, динамические списки с фильтрацией и сортировкой.

Совместимость и производительность

flip оптимизирован для работы с динамическими списками любых размеров. Анимации выполняются через transform и opacity, что позволяет использовать GPU-ускорение. В отличие от ручного вычисления координат, встроенный механизм автоматически обрабатывает:

  • перемещения элементов,
  • изменение размеров,
  • добавление и удаление.

Модуль svelte/animate является мощным инструментом для создания естественных и плавных интерфейсных анимаций без сложных вычислений. Правильное использование flip и комбинаций с transition позволяет реализовать высококачественные анимации списков, карточек и других динамических компонентов.

Оглавление