Erzwingen einer Transitionsanimation

[Rolf B]

Hallo alle,

ich habe das Problem, dass ich ein HTML Element von einer Position A zu einer Position B animieren will

.elem {
   transition: transform 1s;
}
#container .elem {
   transform: translate(...) rotate() skew() salto3d();
}

   let er = elem.getBoundingClientRect();
   let cr = container.getBoundingClientRect();
   let transform = `transform: translate(${er.x-cr.x}px, ${er.y-cr.y}px)`;
   container.appendChild(elem);
   elem.style = transform;
   ?
   elem.style = "";

Im Real Life™️ ist das alles noch ganz anders, es geht hier nur um die Verdeutlichung der Situation und deshalb lohnt eine Diskussion über Pros und Cons dieses Beispielcodes nicht. Ich denke, ihr erkennt, wie der Code und das CSS gedacht sind.

Das Element, um das es geht, befindet sich vor dem Umhängen in den Container an einer bestimmten Position, die von seinem alten Container bestimmt wird. Ich berechne den Transform, damit es nach dem Umhängen erstmal an diesem Ort bleibt.

Das Wegnehmen des transform aus dem Element-Style aktiviert den transform im container und das Element transitioniert dahin.

So die Idee. Es springt aber einfach. Weil zwischen den beiden style-Zuweisungen keine Layout-Phase des Browsers läuft und die Layout-Engine die erste Style-Zuweisung deshalb gar nicht bemerkt.

Meine Workarounds bisher:

• Ich kann einen setTimeout() machen mit 10ms Wartezeit und den Style in der Timeout-Funktion entfernen. Find ich aber eigentlich unschön.

• Ich kann elem.offsetLeft auslesen - das erzwingt einen Durchlauf der Layout-Engine, weil sich durch das Umhängen des Elements das offsetParent geändert hat. Das finde ich aber kryptisch.

Gibt's einen eleganten Weg, einen Reflow zu triggern? Ohne dass man Nebeneffekte einsetzt?

Die Frage, die man stellen darf, ist natürlich, wie das Element an die Position vor der Übergabe gekommen ist. Ja, auch durch eine Transition. Wenn ich die komplette Bewegung aber in einer Transition von der Ursprungsprungsposition zur Zielposition laufen lassen will, bin ich in der Bretagne... Bedrullje... oder so ähnlich... - ich muss dann ziemlich heftig Transformationen durchrechnen und meinen Starttransform daraus ermitteln. Das will ich mir - bislang - nicht antun.

Rolf