javascript - Restart css transition -

i'm trying restart transition in javascript , without librairies or css. don't want achieve trick settimeout or clientheight. know it's because of reflow i'm trying find ideal solution this.

here steps :

1) remove transition -> set new position (without transition)

2) add transition -> set new position (with animation)

here javascript.

let element1 = document.queryselector(".box")  document.queryselector("button").onclick = () => {    element1.style.transition = "none"   element1.style.transform = "translatey(50px)"    element1.style.transition = "all 0.4s";   element1.style.transform = "translatey(10px)"  } 

right making transition , moving 10px instead of setting 50px position first.

your code don't works because browser don't recalculates styles between first , second "batch" of updates.

one trick force browser recalculate them calling 1 of functions it. i'll use getboundingclientrect, example, browser needs calculate styles size , position of element.

so:

let element1 = document.queryselector(".box") document.queryselector("button").onclick = () => {   // call first batch of updates   element1.style.transition = "none";   element1.style.transform = "translatey(50px)";    // force browser recalculate styles   element1.getboundingclientrect();    // call second batch of updates   element1.style.transition = "all 0.4s";   element1.style.transform = "translatey(10px)"; }