In case it was missed, the code snippets are literally just following the FLIP pattern minus the last step of removing the transition class after the transition completes. Here's some pseudocode for what each element is doing: ``` const initial = elem.getBoundingClientRect().top moveElement(elem) const final = elem.getBoundingClientRect().top elem.style.setProperty("transition-duration", "0s") elem.style.setProperty("transform", `translateY(${dx}px)`) forceBrowserStyleRecalc() elem.classList.add("transition") // contains `transition: 2s transform` elem.style.removeProperty("transition-duration") elem.style.removeProperty("transform") ``` The glitches seem to involve the starting point for the `transform`, as if `dx` isn't accurate somehow. And the only thing that's different between the two code snippets is how `moveElement` is performed. -- GitHub Notification of comment by isiahmeadows Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5334#issuecomment-661169179 using your GitHub accountReceived on Monday, 20 July 2020 16:40:52 UTC
This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:11 UTC