Установка и первый эффект

Vanilla Disintegrate позволяет удалить любой измеримый DOM-элемент с эффектом щелчка Таноса. Точка входа vanilla-disintegrate/snapdom уже подключает захват через SnapDOM, а импорт CSS не нужен.

Установка

Используйте любой поддерживаемый пакетный менеджер:

# npm
npm install vanilla-disintegrate @zumer/snapdom

# Yarn
yarn add vanilla-disintegrate @zumer/snapdom

# pnpm
pnpm add vanilla-disintegrate @zumer/snapdom

# Bun
bun add vanilla-disintegrate @zumer/snapdom

Библиотека снимает внешний вид элемента до распада на частицы, и библиотеку захвата выбираете вы. Пакет содержит две точки входа:

Точка входа	Состав	Требует
vanilla-disintegrate	Ядро: эффекты, жизненный цикл, layout, звук. capture передаёте вы.	Ничего
vanilla-disintegrate/snapdom	Тот же API с SnapDOM в роли capture по умолчанию.	@zumer/snapdom

Обе точки входа экспортируют одинаковый API Disintegrator. @zumer/snapdom — необязательная peer-зависимость: ставьте её только ради входа /snapdom, ядро к ней никогда не обращается.

import Disintegrator from 'vanilla-disintegrate/snapdom';

const effects = new Disintegrator();
const card = document.querySelector<HTMLElement>('.card');

if (card) {
  effects.remove(card, { effect: 'dust' });
}

remove() сразу возвращает объект операции. Ожидайте operation.finished, только если следующему действию нужно дождаться конца визуального эффекта.

Удаление с возможностью вернуть узел

const removal = effects.remove(card, {
  effect: 'dust',
  retain: true,
});

await removal.finished;

if (removal.removalId) {
  const retained = effects.take(removal.removalId);

  if (retained) {
    list.append(retained);
    await effects.restore(retained).finished;
  }
}

Приложение само вставляет узел в нужное место. Если в restore() не передан другой effect, библиотека использует пару, запомненную при удалении.

Другой движок захвата

capture — открытый адаптер, а не API только для SnapDOM. Например, можно подключить html2canvas:

import html2canvas from 'html2canvas';
import Disintegrator from 'vanilla-disintegrate';

const effects = new Disintegrator({
  capture: (element, context) => {
    context.signal.throwIfAborted();

    return html2canvas(element, {
      backgroundColor: null,
      logging: false,
      scale: 1,
      useCORS: true,
      onclone: (_document, clone) => {
        if (context.restoreRootOpacity !== undefined) {
          clone.style.setProperty('opacity', context.restoreRootOpacity, 'important');
        }
      },
    });
  },
});

Переданная функция полностью заменяет захват. На этом пути импортируйте ядро vanilla-disintegrate: у него нет runtime-зависимостей, и SnapDOM не попадает в граф модулей.

Очистка

Когда владеющий экран окончательно уничтожен, вызовите effects.destroy(). Метод остановит операции, фоновые задачи и observers, освободит снимки и все сохранённые DOM-ссылки.

Поддержка браузеров

Ядру нужны сборка ES2020, Canvas, Web Animations, AbortController и requestAnimationFrame. Четыре встроенных эффекта рисуют частицы через WebGL2 — это и задаёт базовую планку: Chrome 80+, Firefox 74+, Edge 80+, Opera 67+ и Safari 15+.

Там, где WebGL2 нет или контекст создать не удалось, встроенные эффекты деградируют, а не падают: remove() всё равно открепляет элемент, restore() всё равно показывает его, операция завершается со статусом skipped, а причина уходит в onError. Кастомные эффекты на WAAPI, CSS или Canvas 2D продолжают анимироваться и на старых движках.

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