W3C home > Mailing lists > Public > public-css-archive@w3.org > July 2020

Re: [csswg-drafts] [css-transforms-1] [css-transitions-1] Strange behavior with `insertBefore` vs `appendChild` and transitions (#5334)

From: Isiah Meadows via GitHub <sysbot+gh@w3.org>
Date: Mon, 20 Jul 2020 16:40:51 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-661169179-1595263249-sysbot+gh@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

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:11 UTC