Add discrete properties to the default list of transition properties#17812
Merged
philipp-spiess merged 4 commits intomainfrom Apr 30, 2025
Merged
Add discrete properties to the default list of transition properties#17812philipp-spiess merged 4 commits intomainfrom
transition properties#17812philipp-spiess merged 4 commits intomainfrom
Conversation
adamwathan
approved these changes
Apr 30, 2025
Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
thecrypticace
pushed a commit
to tailwindlabs/tailwindcss.com
that referenced
this pull request
Aug 25, 2025
Updates `transition-property` values as per tailwindlabs/tailwindcss#15690 and tailwindlabs/tailwindcss#17812. see tailwindlabs/tailwindcss#18793
thecrypticace
added a commit
that referenced
this pull request
Aug 25, 2025
We introduced an accidental breaking change a few months ago in 4.1.5 with #17812. We added `visibility` to the property list in `transition` which unfortunately only applies its change instantly when going from invisible -> visible. I've checked `display`, `content-visibility`, and `pointer-events` and they apply their change instantly (as best I can tell) when transitioning by default. And `overlay` only "applies" for discrete transitions so it can stay as well. The spec has this to say about [animating `visibility`](https://www.w3.org/TR/web-animations-1/#animating-visibility): > For the visibility property, visible is interpolated as a discrete step where values of p between 0 and 1 map to visible and other values of p map to the closer endpoint; if neither value is visible then discrete animation is used. This means that for visible (t=0) -> hidden (t=1) the timeline looks like this: - t=0.0: visible - t=0.5: visible - t=0.999…8: visible - t=1.0: invisible This means that for invisible (t=0) -> visible (t=1) the timeline looks like this: - t=0.0: invisible - t=0.000…1: visible - t=0.5: visible - t=1.0: visible So the value *is* instantly applied if the element is initially invisible but when going the other direction this is not the case. This happens whether or not the transition type is discrete. While the spec calls out [`display` as working similarly](https://drafts.csswg.org/css-display-4/#display-animation) in practice this is only the case when `transition-behavior` is explicitly set to `allow-discrete` otherwise the change is instant for both directions. Fixes #18793
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
This PR changes the
transitionutility to include five new properties:displayvisibilitycontent-visibilityoverlaypointer-eventesOn its own, this change does nothing since these properties will apply their change immediately. However, in combination with
transition-discretethis will ensure that you can now transition these types without requieringtransition-allor arbitrary transition properties.Test plan
<dialog>componentsScreen.Recording.2025-04-28.at.18.01.21.mov
Notice how:
overlayin the property list)