mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Add new transition-discrete and transition-normal utilities (#15051)
This PR adds two new utilities for the `transition-behavior` property: | Name | Definition | | --- | --- | | `transition-discrete` | `transition-behavior: allow-discrete` | | `transition-normal` | `transition-behavior: normal` | # Test plan Not a lot too test here, but verified in the browser that these properties generate correct CSS: <img width="301" alt="image" src="https://github.com/user-attachments/assets/db314750-e129-47d6-b605-d3b367ae81a4"> <img width="253" alt="image" src="https://github.com/user-attachments/assets/24da5a6e-0b6a-48aa-a042-5ec19773bc6b"> --------- Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
This commit is contained in:
parent
75deecadca
commit
85dc3db633
@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
- Bundle `@tailwindcss/forms`, `@tailwindcss/typography`, and `@tailwindcss/aspect-ratio` with the standalone CLI ([#15028](https://github.com/tailwindlabs/tailwindcss/pull/15028))
|
||||
- Allow `addUtilities()` and `addComponents()` to work with child combinators and other complex selectors ([#15029](https://github.com/tailwindlabs/tailwindcss/pull/15029))
|
||||
- Support colors that use `<alpha-value>` in JS configs and plugins ([#15033](https://github.com/tailwindlabs/tailwindcss/pull/15033))
|
||||
- Add new `transition-discrete` and `transition-normal` utilities for `transition-behavior` ([#15051](https://github.com/tailwindlabs/tailwindcss/pull/15051))
|
||||
- _Upgrade (experimental)_: Migrate `[&>*]` to the `*` variant ([#15022](https://github.com/tailwindlabs/tailwindcss/pull/15022))
|
||||
- _Upgrade (experimental)_: Migrate `[&_*]` to the `**` variant ([#15022](https://github.com/tailwindlabs/tailwindcss/pull/15022))
|
||||
- _Upgrade (experimental)_: Warn when trying to migrating a project that is not on Tailwind CSS v3 ([#15015](https://github.com/tailwindlabs/tailwindcss/pull/15015))
|
||||
|
||||
@ -7176,7 +7176,9 @@ exports[`getClassList 1`] = `
|
||||
"transition",
|
||||
"transition-all",
|
||||
"transition-colors",
|
||||
"transition-discrete",
|
||||
"transition-none",
|
||||
"transition-normal",
|
||||
"transition-opacity",
|
||||
"transition-shadow",
|
||||
"transition-transform",
|
||||
|
||||
@ -339,6 +339,7 @@ export default [
|
||||
'backdrop-filter',
|
||||
|
||||
'transition-property',
|
||||
'transition-behavior',
|
||||
'transition-delay',
|
||||
'transition-duration',
|
||||
'transition-timing-function',
|
||||
|
||||
@ -14463,6 +14463,20 @@ test('transition', async () => {
|
||||
).toEqual('')
|
||||
})
|
||||
|
||||
test('transition-behavior', async () => {
|
||||
expect(await run(['transition-discrete', 'transition-normal'])).toMatchInlineSnapshot(`
|
||||
".transition-discrete {
|
||||
transition-behavior: allow-discrete;
|
||||
}
|
||||
|
||||
.transition-normal {
|
||||
transition-behavior: normal;
|
||||
}"
|
||||
`)
|
||||
|
||||
expect(await run(['-transition-discrete', '-transition-normal'])).toEqual('')
|
||||
})
|
||||
|
||||
test('delay', async () => {
|
||||
expect(await run(['delay-123', 'delay-200', 'delay-[300ms]'])).toMatchInlineSnapshot(`
|
||||
".delay-123 {
|
||||
|
||||
@ -3552,6 +3552,9 @@ export function createUtilities(theme: Theme) {
|
||||
],
|
||||
})
|
||||
|
||||
staticUtility('transition-discrete', [['transition-behavior', 'allow-discrete']])
|
||||
staticUtility('transition-normal', [['transition-behavior', 'normal']])
|
||||
|
||||
functionalUtility('delay', {
|
||||
handleBareValue: ({ value }) => {
|
||||
if (!isPositiveInteger(value)) return null
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user