Удаление и восстановление

remove() и restore() — независимые операции. Библиотека анимирует переход, а приложение управляет содержимым и местом вставки.

Удаление элемента

Перед отсоединением библиотека измеряет живой элемент. Визуальный эффект работает в изолированном слое, когда реального узла уже нет в layout.

const operation = effects.remove(element, {
  effect: 'dust',
  retain: false,
  layout: true,
});

const result = await operation.finished;

retain по умолчанию равен false: ссылка на DOM не сохраняется. Опция layout анимирует соседей в новые позиции.

Восстановление вставленного элемента

Сначала вставьте узел туда, где он должен оказаться, и только затем вызывайте restore().

container.append(element);
await effects.restore(element, { effect: 'dust' }).finished;

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

Скрытие сделано приостановленной Web Animation, а не инлайновым стилем, поэтому переживает смену классов и стилей во время эффекта. Из каскада CSS следует одно ограничение: авторское объявление с !important приоритетнее анимаций, поэтому правило вида .card { opacity: 1 !important } на цели восстановления оставит живой элемент видимым под слоем частиц. Уберите !important с цели или восстанавливайте обёртку без него.

Совершенно новый элемент

Предварительное удаление не требуется: restore() также работает как entrance-анимация.

const message = document.createElement('aside');
message.textContent = 'Создан только что';
notifications.append(message);

effects.restore(message, { effect: 'vapor' });

Объект операции

const operation = effects.remove(element);

operation.operation; // 'remove'
operation.removalId; // RemovalId | null
operation.cancel();

const result = await operation.finished;
result.status; // 'completed' | 'cancelled' | 'skipped'

После завершения объект операции не удерживает DOM-элемент.

Отмена останавливает только визуал

cancel() останавливает анимацию и звук, но не отменяет выбранное действие с контентом: удалённый элемент остаётся удалённым, а восстанавливаемый становится видимым.

Ошибка не блокирует контент

Если захват, аудио или пользовательский эффект завершились ошибкой, удаление всё равно отсоединит узел, а восстановление покажет его. Ошибка передаётся в onError.

const effects = new Disintegrator({
  onError(error, context) {
    console.error(context.operation, error);
  },
});