Fix React <Transition> flicker issue
#1118
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
This pull request is being automatically deployed with Vercel (learn more). headlessui-react – ./packages/playground-react🔍 Inspect: https://vercel.com/tailwindlabs/headlessui-react/62EppTRzqaq4opm6KpcizFh5fD2W headlessui-vue – ./packages/playground-vue🔍 Inspect: https://vercel.com/tailwindlabs/headlessui-vue/DLQnivi2TVjtBHYRQVWn3fmWsPE5 |
|
I've still got to update the tests but wanted to be sure I'm not thinking about this wrong. |
|
What should I do because I am in Iran
در تاریخ شنبه ۱۹ فوریهٔ ۲۰۲۲، ۱:۴۱ Jordan Pittman ***@***.***>
نوشت:
… I've still got to update the tests but wanted to be sure I'm not thinking
about this wrong.
—
Reply to this email directly, view it on GitHub
<#1118 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ATMIVVR7TGCV5DIATK6C62LU327Y7ANCNFSM5OZGWJMQ>
.
You are receiving this because you are subscribed to this thread.Message
ID: ***@***.***>
|
This allows us to guarantee that the ref is always referencing the latest callback. This also allows us to re-run fewer effects because we don't really care about intermediate callback values, just the last one.
thecrypticace
force-pushed
the
fix/react-transition-bug
branch
from
21c90df to
42753ec
Compare
This was referenced Mar 1, 2022
This was referenced Aug 5, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
I think I figured it out! (I hope)
Basically the transition component's show defaulted to
true— which is fine. However, we also have an initial render check. This means that the transition doesn't run on first render. But if you trigger a re-render of children without a change in the show state it'll run the enter transition.This means that:
opacity-0Then the transition starts and assumes that the element is invisible. This causes the weird animation flicker where it goes from visible to quickly not visible to visible again. The solution is to store the previous show state and only transition if it is actually different.