- From: Isiah Meadows via GitHub <sysbot+gh@w3.org>
- Date: Mon, 20 Jul 2020 16:40:51 +0000
- To: public-css-archive@w3.org
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 account
Received on Monday, 20 July 2020 16:40:52 UTC