No description
ce9b290b6b
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 |
||
|---|---|---|
| .github | ||
| crates | ||
| integrations | ||
| packages | ||
| patches | ||
| playgrounds | ||
| scripts | ||
| .gitignore | ||
| .npmrc | ||
| .prettierignore | ||
| Cargo.lock | ||
| Cargo.toml | ||
| CHANGELOG.md | ||
| LICENSE | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| rust-toolchain.toml | ||
| turbo.json | ||
| vitest.workspace.ts | ||
A utility-first CSS framework for rapidly building custom user interfaces.
Documentation
For full documentation, visit tailwindcss.com.
Community
For help, discussion about best practices, or feature ideas:
Discuss Tailwind CSS on GitHub
Contributing
If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.