Vanilla Disintegrate — Modern and Impressive Animations for the Web

说明与用途

Vanilla Disintegrate 通过使用 WebGL2 和 DOM 快照，为元素删除提供短暂、令人难忘的粒子化分解动画，保持框架无关且易于集成。

问题

Standard UI interactions use simple fade or transform animations, which become predictable and unmemorable. Developers need a short, engaging effect for actions like removing a card that feels distinct without being distracting.

结果

The disintegration animation provides a short, engaging visual cue for element removal, improving UX while remaining lightweight and framework-agnostic.

工作流

• 1. Import Disintegrator from 'vanilla-disintegrate/snapdom'.
• 2. Instantiate with a preset (e.g., dust).
• 3. Select the target element (e.g., a card).
• 4. Add a click listener to the remove button that calls effects.remove(card).
• 5. The library captures the element as a canvas, renders particles via WebGL2, and removes the original DOM node after the animation.

证据

It animates the removal and restoration of DOM elements using particle effects.

来源

The library first turns the element into an image and then uses that image as the source material for the particles.

来源