Kürzlich bin ich auf ein altes Tutorial gestoßen, das eine Fly-to-Cart-Animation mit jQuery zeigt. Ich wollte mich der Herausforderung stellen, den gleichen Effekt mit reinem JavaScript zu implementieren.

Ich habe ein einfaches Layout mit Produkten und einem Warenkorbsymbol erstellt. Das Styling spielt keine Rolle, deshalb werden wir hier nicht darauf eingehen.

Der Trick besteht darin, das Bild des Produkts zu klonen und es dem Produktelement voranzustellen. Dann berechne die Koordinaten deines geklonten Bildes und Warenkorbsymbols, erhalte die Differenz und übersetze dein Bild darauf. Sie können zusätzliche Effekte hinzufügen, z. B. eine Skalierung auf 0 oder eine Einblendung der Deckkraft. Fügen Sie eine Übergangseigenschaft hinzu, damit die Änderungen im Stil tatsächlich animiert werden

Wenn Sie dem Warenkorbsymbol auch Animationen hinzufügen möchten, verwenden Sie die Ereignisse „transitionstart“ und „transitionend“ auf dem geklonten Bild, um eine CSS-Klasse mit darauf festgelegter Animation hinzuzufügen und zu entfernen.