[Collapsible] Rework CSS transitions #1549
Closed
Conversation
This file contains hidden or 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
mj12albert
added
the
component: collapsible
✅ Deploy Preview for base-ui ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
mj12albert
force-pushed
the
fix/collapsible-transitions
branch
2 times, most recently
from
e95ace8 to
c677588
Compare
mj12albert
commented
Mar 11, 2025
mj12albert
commented
Mar 11, 2025
docs/src/styles.css
Outdated
| [data-demo]:not([data-demo='tailwind']) * { | ||
| all: revert-layer; | ||
| } | ||
|
|
There was a problem hiding this comment.
Tailwind v4 preflight contains:
[hidden]:where(:not([hidden="until-found"])) {
display: none !important;
}which interferes when we need to set display: block while the panel is still hidden to measure it's rendered size before the browser actually renders the change
Setting !important in our inline styles should be enough as long as they are removed accordingly
mj12albert
force-pushed
the
fix/collapsible-transitions
branch
5 times, most recently
from
deab71c to
9d2d1fb
Compare
mj12albert
force-pushed
the
fix/collapsible-transitions
branch
3 times, most recently
from
d33ec17 to
277a85d
Compare
mj12albert
force-pushed
the
fix/collapsible-transitions
branch
from
277a85d to
00f99b8
Compare
mj12albert
force-pushed
the
fix/collapsible-transitions
branch
from
6febffa to
5c9a159
Compare
|
Continues in #1601 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Demo: https://deploy-preview-1549--base-ui.netlify.app/experiments/collapsible/transition
Exploring a solution for both #1334 and #1458
Findings:
Tailwind v4 defaults started applying
display: none !importanton[hidden]which we must override in order to measure the nodeNew gotcha: when transitioning multiple properties e.g.solved and not a limitation anymore ✌️opacityandheighttogether,transition-propertymust list individual properties (transition-property: height, opacity) instead ofallUsed an
AbortControllerto cancel pending unmounts if the open state changes back to open before the pending unmount actually occurs (which is after the duration of the exit transition). I wonder if CSS animations can be made interruptible like transitions with AbortController.Using
element.style.removeProperty('height')leads to huge improvements in the timing/consistency vselement.style.height = ''(or even'0px')There is a weird edge case when
keepMounted={false}and the panel is initially closed, when it opens for the first time and only the first timedata-starting-styleis missing or off by a frame and it needs to be manually set:element.setAttribute('data-starting-style', '')I have followed (at least) the PR section of the contributing guide.