feat: Support CSS transitions in RAC #7488

devongovett · 2024-12-06T06:43:36Z

Fixes #6225, closes #5627

For discussion. This adds support for CSS transitions to RAC for entry and exit animations, in addition to the existing support for keyframe animations. Transitions have the benefit that they are interruptible. I noticed in the ActionBar PR that if you clicked fast enough you could see it "jump". That's because when a keyframe animation is interrupted, it jumps to the end, and then the next animation starts. With CSS transitions, the next animation continues from where the previous one left off instead, avoiding this problem.

Currently there is no API change needed for this:

data-entering – waits for keyframe animations to complete, but does not wait for css transitions. For CSS transitions, the starting styles can be applied here, and after one frame, they are removed so that the transition to the default style occurs.
data-exiting – now waits for css transitions as well.

I'm not sure if this is confusing or not, or whether we should introduce another data attribute instead.

devongovett · 2024-12-06T06:46:39Z

packages/@react-spectrum/s2/src/Modal.tsx

-            isEntering: 250,
+          transition: '[opacity, translate]',
+          transitionDuration: {
+            default: 250,


A bit weird that this is not symmetric with isExiting. isEntering won't work because it is only applied for a single frame. With CSS transitions, isEntering is more like "starting style".

rspbot · 2024-12-06T07:10:36Z

Build successful! 🎉

rspbot · 2024-12-17T11:12:16Z

Build successful! 🎉

snowystinger

I think I like sticking with is entering and is exiting, that's pretty common language around this.

That it waits now for the transitions seems fine on the surface. I'm having trouble coming up with cases where people wouldn't want this behavior.

devongovett · 2024-12-17T18:20:06Z

I think I like sticking with is entering and is exiting, that's pretty common language around this.

The potential confusion is that it does not wait for transitions in the entering state. The entering state acts as the starting state of the transition, then it is removed causing the transition to the default state. So while the transition state is happening (I would call that entering), isEntering is actually false.

snowystinger · 2024-12-17T20:19:03Z

Ah, I see. I got hit by the confusion.
The mental model I was thinking of was https://reactcommunity.org/react-transition-group/css-transition

It doesn't look like we lose the ability to have asymmetrical animations? so I'm ok with it, I think we'll just need to document it much like CSSTransition did and explain what the base/to states are.

…ransition # Conflicts: # packages/react-aria-components/src/utils.tsx

devongovett · 2025-01-10T17:13:37Z

packages/dev/docs/src/Layout.js

@@ -485,7 +485,6 @@ function Nav({currentPageName, pages}) {
            <details key={section.title} open={section.isActive}>
              <summary style={{fontWeight: 'bold'}}>
                <ChevronRight size="S" /> {section.title}
-                {section.title === 'Components' && <VersionBadge version={Object.values(section.pages)[0][0].preRelease} style={{marginLeft: 'auto', fontWeight: 'normal'}} />}


Since we added Autocomplete (the first component alphabetically) all of RAC was getting marked as alpha again 😂

rspbot · 2025-01-10T17:29:00Z

Build successful! 🎉

LFDanLu

Verified the behavior of the transitions in ActionBar/Modal/Popover/Tooltip, definitely much smoother than before when spam opening/closing. Just one small suggestion but otherwise happy for this to go out as is for people to try and give feedback

LFDanLu · 2025-01-10T19:45:41Z

packages/react-aria-components/docs/Popover.mdx

@@ -424,16 +411,13 @@ The `className` and `style` props also accept functions which receive states for
 Popovers also support entry and exit animations via states exposed as data attributes and render props. `Popover` will automatically wait for any exit animations to complete before it is removed from the DOM.


I think the explanation in the CSS transition page styling is good, it might be worthwhile linking to it from the Popover/Tooltip/Modal/etc pages and/or via the JSDOC of the isEntering/isExiting props so it is more discoverable.

reidbarber

Change looks good, minor docs suggestions.

reidbarber · 2025-01-10T19:57:26Z

packages/react-aria-components/docs/styling.mdx


 ### CSS animations

-Overlay components such as [Popover](Popover.html) and [Modal](Modal.html) support entry and exit animations via the `[data-entering]` and `[data-exiting]` states, or via the corresponding render prop functions. You can use these states to apply CSS keyframe animations. These components will automatically wait for any exit animations to complete before they are removed from the DOM.
+For more complicated animations, you can also apply CSS keyframe animations using the same `[data-entering]` and `[data-exiting]` states.


maybe better:

Suggested change

For more complicated animations, you can also apply CSS keyframe animations using the same `[data-entering]` and `[data-exiting]` states.

For more complex animations, you can also apply CSS keyframe animations using the same `[data-entering]` and `[data-exiting]` states.

reidbarber · 2025-01-10T19:58:30Z

packages/react-aria-components/docs/styling.mdx

@@ -268,6 +308,8 @@ Overlay components such as [Popover](Popover.html) and [Modal](Modal.html) suppo
 }
 ```

+Note that unlike CSS transitions, keyframe animations are not interruptable. If the user opens and closes an overlay quickly, the animation may appear to jump to the ending state before the next animation starts.


Suggested change

Note that unlike CSS transitions, keyframe animations are not interruptable. If the user opens and closes an overlay quickly, the animation may appear to jump to the ending state before the next animation starts.

Note that unlike CSS transitions, keyframe animations are not interruptible. If the user opens and closes an overlay quickly, the animation may appear to jump to the ending state before the next animation starts.

rspbot · 2025-01-10T22:29:13Z

Build successful! 🎉

rspbot · 2025-01-10T22:29:14Z

## API Changes

react-aria-components

/react-aria-components:AutocompleteProps

-AutocompleteProps {
-  children: ReactNode
-  defaultInputValue?: string
-  filter?: (string, string) => boolean
-  inputValue?: string
-  onInputChange?: (string) => void
-  slot?: string | null
-}

@react-spectrum/s2

/@react-spectrum/s2:Tabs

 Tabs {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode
   defaultSelectedKey?: Key
   density?: 'compact' | 'regular' = 'regular'
   disabledKeys?: Iterable<Key>
   id?: string
   isDisabled?: boolean
+  isIconOnly?: boolean
   keyboardActivation?: 'automatic' | 'manual' = 'automatic'
-  labelBehavior?: 'show' | 'hide' = 'show'
   onSelectionChange?: (Key) => void
   orientation?: Orientation = 'horizontal'
   selectedKey?: Key | null
   slot?: string | null
 }

/@react-spectrum/s2:TabsProps

 TabsProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode
   defaultSelectedKey?: Key
   density?: 'compact' | 'regular' = 'regular'
   disabledKeys?: Iterable<Key>
   id?: string
   isDisabled?: boolean
+  isIconOnly?: boolean
   keyboardActivation?: 'automatic' | 'manual' = 'automatic'
-  labelBehavior?: 'show' | 'hide' = 'show'
   onSelectionChange?: (Key) => void
   orientation?: Orientation = 'horizontal'
   selectedKey?: Key | null
   slot?: string | null
 }

snowystinger

there's now a width animation introduced by this PR, it's pretty minor though

devongovett · 2025-01-13T23:31:26Z

there's now a width animation introduced by this PR, it's pretty minor though

which component?

snowystinger · 2025-01-14T01:06:33Z

which component?

Sorry, was verifying from testing session. It's the ActionBar for Table

devongovett commented Dec 6, 2024

View reviewed changes

feat: Support CSS transitions in RAC

e74380e

devongovett force-pushed the rac-css-transition branch from fa5755c to e74380e Compare December 6, 2024 06:47

jsdom

ee5679f

snowystinger mentioned this pull request Dec 17, 2024

Make Disclosure Animatable #7528

Open

Merge branch 'main' into rac-css-transition

19dc2d8

snowystinger reviewed Dec 17, 2024

View reviewed changes

devongovett added 6 commits January 9, 2025 18:39

Merge branch 'main' of github.com:adobe/react-spectrum into rac-css-t…

68c9119

…ransition # Conflicts: # packages/react-aria-components/src/utils.tsx

Fix interrupting

b38d8f0

Update ActionBar and Tooltip

e0afcd2

Update docs

2e6abc7

Remove alpha badge from RAC

56945ee

fix comments

41f780b

devongovett marked this pull request as ready for review January 10, 2025 17:05

devongovett commented Jan 10, 2025

View reviewed changes

LFDanLu previously approved these changes Jan 10, 2025

View reviewed changes

reidbarber reviewed Jan 10, 2025

View reviewed changes

review updates

fa08b18

devongovett dismissed LFDanLu’s stale review via fa08b18 January 10, 2025 22:14

reidbarber approved these changes Jan 10, 2025

View reviewed changes

snowystinger approved these changes Jan 13, 2025

View reviewed changes

devongovett added this pull request to the merge queue Jan 13, 2025

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Jan 13, 2025

devongovett added this pull request to the merge queue Jan 14, 2025

Merged via the queue into main with commit 1b425ca Jan 14, 2025
30 checks passed

devongovett deleted the rac-css-transition branch January 14, 2025 01:51

nwidynski mentioned this pull request Jan 17, 2025

Add animation complete callbacks #7630

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Support CSS transitions in RAC #7488

feat: Support CSS transitions in RAC #7488

devongovett commented Dec 6, 2024

devongovett Dec 6, 2024 •

edited

Loading

rspbot commented Dec 6, 2024

rspbot commented Dec 17, 2024

snowystinger left a comment

devongovett commented Dec 17, 2024

snowystinger commented Dec 17, 2024

devongovett Jan 10, 2025

rspbot commented Jan 10, 2025

LFDanLu left a comment

LFDanLu Jan 10, 2025

reidbarber left a comment

reidbarber Jan 10, 2025 •

edited

Loading

reidbarber Jan 10, 2025

rspbot commented Jan 10, 2025

rspbot commented Jan 10, 2025

snowystinger left a comment

devongovett commented Jan 13, 2025

snowystinger commented Jan 14, 2025

		@@ -424,16 +411,13 @@ The `className` and `style` props also accept functions which receive states for
		Popovers also support entry and exit animations via states exposed as data attributes and render props. `Popover` will automatically wait for any exit animations to complete before it is removed from the DOM.

	For more complicated animations, you can also apply CSS keyframe animations using the same `[data-entering]` and `[data-exiting]` states.
	For more complex animations, you can also apply CSS keyframe animations using the same `[data-entering]` and `[data-exiting]` states.

	Note that unlike CSS transitions, keyframe animations are not interruptable. If the user opens and closes an overlay quickly, the animation may appear to jump to the ending state before the next animation starts.
	Note that unlike CSS transitions, keyframe animations are not interruptible. If the user opens and closes an overlay quickly, the animation may appear to jump to the ending state before the next animation starts.

feat: Support CSS transitions in RAC #7488

feat: Support CSS transitions in RAC #7488

Conversation

devongovett commented Dec 6, 2024

devongovett Dec 6, 2024 • edited Loading

Choose a reason for hiding this comment

rspbot commented Dec 6, 2024

rspbot commented Dec 17, 2024

snowystinger left a comment

Choose a reason for hiding this comment

devongovett commented Dec 17, 2024

snowystinger commented Dec 17, 2024

devongovett Jan 10, 2025

Choose a reason for hiding this comment

rspbot commented Jan 10, 2025

LFDanLu left a comment

Choose a reason for hiding this comment

LFDanLu Jan 10, 2025

Choose a reason for hiding this comment

reidbarber left a comment

Choose a reason for hiding this comment

reidbarber Jan 10, 2025 • edited Loading

Choose a reason for hiding this comment

reidbarber Jan 10, 2025

Choose a reason for hiding this comment

rspbot commented Jan 10, 2025

rspbot commented Jan 10, 2025

react-aria-components

/react-aria-components:AutocompleteProps

@react-spectrum/s2

/@react-spectrum/s2:Tabs

/@react-spectrum/s2:TabsProps

snowystinger left a comment

Choose a reason for hiding this comment

devongovett commented Jan 13, 2025

snowystinger commented Jan 14, 2025

devongovett Dec 6, 2024 •

edited

Loading

reidbarber Jan 10, 2025 •

edited

Loading