安装并运行第一个效果

Vanilla Disintegrate 在删除与恢复任意可测量的 DOM 元素时，重现了广为人知的 灭霸响指效果。

安装

使用任意受支持的包管理器：

# 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

库会在元素碎裂前捕获其当前外观，而捕获引擎由你选择。包提供五个可 tree-shaking 的入口：

根入口与 /snapdom 导出相同的 Disintegrator API。每个实例必须且只能提供一个完整 preset 或一个自定义 effect，不存在隐式默认值。

/core 导出 Disintegrator、defineEffect、definePreset 与公共类型。/particles 导出 createParticleEffect、particlePresets、两个粒子动画工厂及其类型，但不会创建实例。这样可以只组合所需层。下面使用内置几何创建一个静音自定义效果；captureElement 代表本页后面介绍的适配器：

import Disintegrator from 'vanilla-disintegrate/core';
import { createParticleEffect, particlePresets } from 'vanilla-disintegrate/particles';

const effects = new Disintegrator({
  capture: captureElement,
  effect: createParticleEffect({ remove: particlePresets.dust }),
});

最短的接入方式是导入 /snapdom 并选择一个完整预设：

import Disintegrator from 'vanilla-disintegrate/snapdom';

const effects = new Disintegrator({ preset: 'dust' });
const card = document.querySelector<HTMLElement>('.card');

if (card) {
  effects.remove(card);
}

remove() 会立即返回操作对象；只有后续逻辑必须等待动画结束时，才需要等待 operation.finished。

删除并恢复同一个节点

仅当之后可能还需要原节点时才设置 retain: true。节点重新插入的位置仍由应用决定。

const removal = effects.remove(card, {
  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() 未指定其他 preset 或自定义 effect，将使用删除时记住的完整配置。

使用其他捕获库

capture 是一个函数：接收元素，返回 <canvas> 或其 promise。任何能做到这一点的库都可以接入，例如 html2canvas：

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

const effects = new Disintegrator({
  preset: 'dust',
  capture: (element, context) => {
    if (context.signal.aborted) throw new DOMException('Capture aborted.', 'AbortError');

    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：它没有强制运行时依赖。@zumer/snapdom 是仅供 /snapdom 入口使用的可选 peer 依赖，因此 SnapDOM 不会进入这里的模块图。

适配器上下文、取消契约和 createSnapdomCapture() 默认值请参阅捕获 API。

本地或通过 CDN 引入

如果想在不使用构建工具或包管理器的情况下快速集成 Vanilla Disintegrate，可以通过 CDN 引入，或下载包含最新版本的压缩包在本地使用。

IIFE 构建已包含 SnapDOM，并全局暴露 VanillaDisintegrate：

<script src="https://cdn.jsdelivr.net/npm/vanilla-disintegrate@latest/dist/vanilla-disintegrate.iife.min.js"></script>
<script>
  const effects = new VanillaDisintegrate.Disintegrator({ preset: 'dust' });
  effects.remove(document.querySelector('.card'));
</script>

压缩包已经包含最小化的 index.html、IIFE 构建、许可证和全部内置声音。请通过本地 HTTP 服务器运行解压后的目录，以便浏览器加载音频。手动复制 IIFE 时，请将 sounds 目录放在脚本旁边；CDN 版本会自动解析对应资源。

清理

所属页面永久销毁时调用 effects.destroy()。它会停止操作和观察器，并释放快照与所有保留的 DOM 引用。

effects.destroy();