feat: Use fastdom to batch writes and avoid sync layout (take two) #496
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Continuing from #385. Sorry for the hijack @STRML I was going to force push to the PR branch instead but I realised it's on a separate repo 😢
This PR fixes the enter animations by running the class mutation for
enter
on the event handler, skipping fastdom and only relying it on the-active
class. The difference is on instead of recalculating the DOM by forcefully invalidating it on every animation, the recalculation happens at the end of the frame per the browser logic. This is huge for animations where more than one element is being animated at the same frame. Results are on the flamecharts below on theTransitionGroup
story when set to animate 3 elements at once.Before:
Notice the expensive style recalculation and relayouts on every animation done.
After:

PR also fixes the missing
webpack-atoms
dependency to run Storybook.