API 参考

默认导出是捕获、渲染、声音、布局、快照准备与节点存储之上的轻量门面。

构造函数

import Disintegrator from 'vanilla-disintegrate/snapdom';

const effects = new Disintegrator(options);

选项	类型	默认值
effect	EffectSelection	dust
effects	Record<string, EffectDefinition>	{}
sound	boolean | SoundDefinition	false
layout	boolean | LayoutOptions	true
preparation	boolean | PreparationOptions	false
respectReducedMotion	boolean	true
capture	SnapshotCapture	SnapDOM on /snapdom
overlayRoot	HTMLElement | () => HTMLElement	document.body
onTrigger、onStart、onComplete、onError	回调	—

remove(target, options?)

测量并分离元素，同步返回 EffectOperation。

const operation = effects.remove('.card', {
  effect: 'scatter',
  retain: true,
  sound: true,
  layout: { duration: 260 },
  detach: (element) => element.remove(),
});

detach 会替换默认的 element.remove() 提交，适合让响应式渲染器通过自身状态移除节点。若回调抛出错误，错误会传给 onError，库会回退到原生移除。

target 可为 HTMLElement 或选择器。找不到选择器时会在操作开始前抛出错误。

restore(target, options?)

在当前几何位置动画显示已连接、可测量的元素。分离节点或零尺寸会同步抛出错误。

节点存储

const element = effects.take(removalId); // HTMLElement | null
const discarded = effects.discard(removalId); // boolean
const count = effects.discardAll(); // number

快照准备

const unregister = effects.register(elements);
const results = await effects.prepare(elements);
effects.invalidate(elements);
effects.clearPrepared();

register() 遵循后台策略；即使后台准备关闭，prepare() 也会立即捕获。

destroy()

取消活动操作，停止观察器，释放快照与保留节点。重复调用是安全的；销毁后不能开始新操作。

EffectOperation

interface EffectOperation {
  readonly operation: 'remove' | 'restore';
  readonly removalId: RemovalId | null;
  readonly finished: Promise<{
    operation: 'remove' | 'restore';
    status: 'completed' | 'cancelled' | 'skipped';
    removalId: RemovalId | null;
  }>;
  cancel(): void;
}

操作对象不会暴露 element。单次操作选项优先于实例默认值。