Wie Transition auslösen?

[ChrisB]

Hi,

Mir ist nicht klar, warum es nicht funktioniert, denn zum Einen ist das CSS
längst geladen, da der Inhalt für den Balken mit dem Transistion-Effekt erst nach einer User-Aktion über Ajax geladen wird und zum Anderen wird erst die Rückgabe des Ajax-Request in das Container-Div geschrieben, bevor anschließend die Breiten-Angaben verändert werden.

Das liegt daran, dass das Element erst gerendert wird, wenn deine JavaScript-Operation abgeschlossen ist.
Element einfügen und direkt danach die „neue“ Breite setzen = Element wird gleich mit der vermeintlich neuen Breite gerendert, ergo findet keine Veränderung statt, die die Transition auslösen könnte.

Mit setTimeout startet du einen neuen Ausführungskontext – der alte wird erst mal beendet, damit die Kontrolle an die Rendering-Engine zurück gegeben, und das Element mit der ursprünglichen Breite gerendert. Und der zeitversetzte Aufruf des Breite-Änderns ändert dann anschließend *tatsächlich* die Elementbreite.

MfG ChrisB