Tom Schreiner: Transition bei Tausch von DOM children

Beitrag lesen

Hallo,

ich habe folgendes Problem:

im Prinzip möchte ich zwei Bilder per Button mit einer Transition tauschen... ...also von

<div Parent_1><img Bild1></div>
<div Parent_2><img Bild2></div>

nach

<div Parent_1><img Bild2></div>
<div Parent_2><img Bild1></div>

Hatte da eine ziemlich aufwändige [wie auch sehr abenteuerliche] Variante am Start, mit Ermittlung der Koordinaten via getBoundingClientRect(), danach Verschieben via der entsprechenden -top, -right, -bottom, -left - Werte und ontransitionend eine Neubesetzung der img-src-Attribute mit den neuen Werten bei gleichzeitiger Entfernung der transition-Klasse und Wiederherstellung der Ursprungskoordinaten (was im Chrome manchmal ein kurzes Durchflackern der jeweiligen anderen Werte nach sich zog).

...gibt es da nicht eine elegantere Lösung?

dachte da an sowas in die Richtung wie replaceChild() bzw. removeChild() / appendChild() auf den parent-DIVs mit einer jeweiligen ID auf den IMGs (das erkennt das DOM aber nicht als "Verschieben" des IMGs an, daher bewirken CSS-transitions nichts).

Danke! Tom