-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Implement <Transition />
and <TransitionChild />
on top of data attributes
#3303
Conversation
This will be used when we implement the `<Transition />` component purely using the `useTransitionData` information. But because there is a hierarchy between `<Transition />` and `<TransitionChild />` we need to know when transitions start and end.
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
b6e207e
to
401d4fc
Compare
Due to a timing issue bug, we updated the snapshot tests in #3273 incorrectly so this commit fixes that which is why there are a lot of changes. Most tests have `show={true}` but not `appear` which means that they should _not_ transition which means that no data attributes should be present.
Now that we set state instead of mutating the DOM directly we need to wait a tiny bit and then we can trigger the transition to ensure a smooth transition.
401d4fc
to
1c7acd1
Compare
packages/@headlessui-react/src/components/transition/transition.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Lot of things work — including cancelling / uncancelling / etc… I've got a small change and a question but also noticed a few issues with the transition examples:
- Both Transition -> Nested examples are broken on the first transition
- Ditto about the color transition / Peek A Boo one
- Ditto for some of the Appear ones
- The Full Page transition initial element disappears on the first transition but then works fine for all subsequent transitions
These all seem to be related to behavior on the very first transition on an element but everything else seems fine.
…n.tsx Co-authored-by: Jordan Pittman <[email protected]>
This makes sure that the `Enter` state is applied initially when it has to. This also means that we can simplify the `prepareTransition` code again because we don't need to wait for the next microTask which made sure `TransitionState.Enter` was available.
This PR is mainly a refactor to implement the
<Transition />
and<TransitionChild />
components on top of the data attribute implementation. The big difference is that there is no direct DOM mutation anymore, but just applying data attributes to the underlying element.This also means that the
<Transition />
anduseTransitionData()
don't have 2 separate paths for controlling the transition, but there is only a single source of truth.This PR also renames the
useTransitionData()
touseTransition()
and removed the originaluseTransition()
.Because of the refactor and not relying on direct DOM mutations we can use React to declaratively provide the correct state instead of doing it imperatively by mutating directly. Which in turn fixes an issue: #3277
From an API perspective nothing changes, it's purely an internal refactor.
Fixes: #3277