DOM-Übergänge animieren

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Nehmen wir an, Sie fügen ein neues Element zur Seite hinzu und es verschiebt andere Elemente. Das kann sofort geschehen, aber es hilft Ihrem Gehirn zu verstehen, was gerade passiert ist, wenn die Elemente, die weggeschoben wurden, zu ihrer neuen Position animiert werden. Hier kommt Alex MacCaw und sein neues magicMove jQuery-Plugin ins Spiel.

Die Bibliothek funktioniert, indem sie eine separate und versteckte Kopie des Elements, das Sie animieren möchten, an die Seite anhängt. Jede DOM-Manipulation, die Sie durchführen, wird tatsächlich auf dieser Kopie durchgeführt. Wenn Sie fertig sind, ermittelt die Bibliothek den Unterschied zwischen der aktuellen Position des Elements und der Position der Kopie und animiert zwischen ihnen (mithilfe von CSS-Übergängen).

Direkter Link →