Wie kann man Telegramms „Auflösen in Partikel“ mit React neu erstellen? ⇐ JavaScript

[Anonymous]

Ich versuche, einen "Auflösen" -Effekt zu replizieren, ähnlich wie das Telegramm, das bei einer Nachricht gelöscht wird, und in diesem kurzen Video gezeigt. Klicken Sie auf), der untergeordnete Inhalt animiert: < /p>

Verblassen Sie < /li>
Blur < /li>
Dann wechseln Sie nach kurzer Zeit in einen Partikeleffekt < /li>
Nach kurzer Zeit verschwinden die Partikel. />
React-tspartikel für den Partikeleffekt < /li>
class = "snippet">

Code: Select all

const { useRef } = React;

function DisintegrateEffect() {
const divRef = useRef(null);

const handleDelete = () => {
if (!divRef.current) return;

gsap.to(divRef.current, {
duration: 0.8,
opacity: 0,
scale: 1.2,
filter: 'blur(15px)',
y: -10,
ease: 'power2.out',
onComplete: () => {
divRef.current.style.display = 'none';
}
});
};

return (

Apagar

);
}

ReactDOM.render(, document.getElementById('container'));< /code>

Jsfiddle