CODEWITHSUNDEEP
javascriptcss
twiiterangry
twiiterangry

Reputation: 43

Callback for style change of element in Javascript

Sorry for my little knowledge about Javascript, but I really want to ask about this: I have a following CSS rule:

.myClass {
    transition: .3s all;
 }

And following js in <script>:

[node].style.transform = "translateX(-100px)";
[node].className = "myClass";

// do stuffs for transition end event

I don't understand why the node moves towards left for 100px WITH the transition effect. Isn't that true that Javascript code executes line by line? It seems that setTimout([callback], 10) does solve the problem, but why exactly?

Upvotes: 4

Views: 1242

Answers (1)

Quentin
Quentin

Reputation: 943097

I don't understand why the node moves towards left for 100px WITH the transition effect. Isn't that true that Javascript code executes line by line?

The JavaScript executes line by line, but the browser monitors for changes to the DOM in a separate thread and updates things in bulk.

The transitionend event will fire when the transition has completed.

Upvotes: 2

Related Questions