[JS] vreemd DOM-gedrag na AJAX call

[TheLemon]

Ik heb iets vreemds na een AJAX-call. In dit geval gaat het om een updatepanel van .Net, maar dat moet niet uitmaken denk ik.

Ik zet een css class nadat ik de nieuwe html binnen heb via het updatepanel en daar zit een css3 transitie op.
Wanneer ik dit gewoon zo doe, skipt hij de transitie en komt hij meteen in de staat (achtergrondkleur in dit geval) van de toegevoegde class. Als ik die class zet met een setTimeout met 0ms, doet hij wel de transitie.
Dit werkt dus blijkbaar, maar ik vind het niet erg elegant.

Wie weet hoe dit komt en hoe ik het goed kan oplossen?

[RobIII]

Heb je een (online) testcase? (Bijv. jsfiddle). Zorg wel dat je testcase niet meer zaken bevat dan nodig voor 't reproduceren van je probleem.

[Bosmonster]

Volgens mij genereert de update-panel gewoon nieuwe html en zet deze in de panel. Dan is dat dus gewoon de standaard class van dat element en is er geen transitie. Als je settimeout gebruikt ziet ie het wel als een class-wijziging en toont ie wel de transitie.

De update-panel is hier dus waarschijnlijk wel degelijk de boosdoener.

[TheLemon]

Nee, maar ik zet die class pas met js nadat de updatepanel klaar is. Ik zal de twee varianten even laten zien:

Dit doet het, maar zonder css transitie:

code:

currentModel.addClass('open');

Dit doet het mét css transitie:

code:

setTimeout(function(){currentModel.addClass('open');}, 0);

(met 0ms delay dus!)

[chem]

0ms delay is eigenlijk geen delay maar "zodra het kan" FYI.

In de praktijk doet de browser dus een repaint waarschijnlijk en vv detecteert hij de verandering.

[_Thanatos_]

In je eerste geval is wellicht de DOM nog aan het updaten... Leuk spul, die race-conditions in javascript