Transition bei Tausch von DOM children

[Rolf B]

Hallo Tom,

ich habe mich gefragt, warum die Bilder zwingend ein neues Parent bekommen müssen, aber ich denke ich weiß die Antwort: responsive layout. Wenn die Parent-Beziehung nicht geändert wird, müsstest Du bei jeder Layoutänderung die Positionen neu berechnen. Das kann aufwändig werden. Die Wahrscheinlichkeit, dass sich das Layout während der Transition ändert, ist vernachlässigbar; und wenn doch, tough luck, dear user.

Ich glaube, deine handberechnete Verschiebung musst Du beibehalten.

Aber ein Ändern des src-Attributs solltest Du wirklich lassen. Das ist eine asynchrone Operation, weil der Browser das Bild erstmal laden muss - auch wenn's nur der Cache ist -, und dazwischen wird neu gezeichnet.

function HandleSwapTransitionEnd() {
   let img1 = document.getElementById("bild_1");
   let img2 = document.getElementById("bild_2");
   let div2 = img2.parentNode;

   div2.appendChild(img1.replaceWith(img2));
   // transition entfernen
   // top/left von img1 und img2 entfernen
}

müsste eigentlich den Zweck erfüllen. replaceWith ersetzt ein DOM Element durch ein anderes und liefert das ersetzte Element zurück (hier also img1). D.h. diese eine Zeile am Schluss sollte effizient die Parent-Beziehungen vertauschen. Danach kannst Du die Styles geradeziehen.

Hierbei passiert nichts asynchrones, d.h. der Browser sollte erst dann die Layout-Maschine neu anwerfen wenn das JavaScript durchgelaufen ist.

Das Attribut ontransitionend solltest Du ebenfalls nicht nutzen. Sowas macht man heutzutage unaufdringlich mit

let img1 = document.getElementById("img1")
img1.addEventListener("transitionend", HandleSwapTransitionEnd);

Das muss nur so platziert sein, dass es das Element bereits gibt wenn der Code läuft, d.h. entweder gehört das Script an's Seitenende oder Du musst die Registrierung in einen DOMContentLoaded Handler packen.

Rolf