Vanilla Disintegrate · DOM 元素删除与恢复粒子动画

一个用于为 DOM 元素的删除与恢复添加动画的 TypeScript 库，内置受著名灭霸响指启发的 WebGL2 GPU 加速粒子效果。兼容原生 JavaScript 和任何框架。

npm install vanilla-disintegrate @zumer/snapdom

在游乐场中构建效果

交互式游乐场

创建你的效果

从预设开始，分别调整删除和恢复，预览两个方向，然后复制可直接使用的 TypeScript。

现成效果

动画

Particle laboratory

DOM elementWebGL2

import Disintegrator from 'vanilla-disintegrate/snapdom';

export const disintegrator = new Disintegrator({
  preset: 'dust',
});

正在准备快照…

曲线改变粒子的加速和淡出方式，但不改变运动路径。

方向决定元素的哪个区域最先开始消散。

持续时间粒子动画的基础持续时间，数值越大效果越慢。

启动延迟第一批与最后一批粒子开始时间的最大间隔。

释放随机度在所选释放模式与完全随机顺序之间进行混合。

淡出起点每个粒子在自身生命周期中开始淡出的时刻。

布局切换周围布局开始移动前需要释放的粒子比例。

文档

从安装和内置预设开始，再添加恢复、撤销、后台准备或自定义渲染器。