4 ms·

That breaks the out transition.

amatecha 1y ago
So, win-win? I want a modal to get out of the way as fast as possible, any fade/transition animations are keeping me from what I want to look at. :)
- chamomeal 1y ago
  The designers don’t want to break the out transition, and the PM wants whatever the designer wants
akie 1y ago
Unless you set `isOpen` only when the transition has ended
- debugnik 1y ago
  Isn't isOpen = false what triggers the transition in the first place here?
abdusco 1y ago
Even when using view transitions? https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-s...
- csande17 1y ago
  The "Transitioning elements on DOM addition and removal" example in that article uses a setTimeout() to wait an extra 1000 milliseconds before removing the element from the DOM. If you immediately remove the element from the DOM (like would usually happen if you do {isOpen && <Modal />} in React), it'll vanish immediately and won't have time to play the transition.
btown 1y ago
You can create a ref that stores whether isOpen has ever been true, and condition on that, letting you lazily initialize the Modal and its contents while preserving out transitions. I’m honestly surprised this isn’t recommended a lot more often!
zarzavat 1y ago
Good. Transitions are meant to serve a purpose, showing what came from where. A modal doesn't need a transition, it should just disappear instantly. Like closing a window. The user is not helped by animating that something disappears when they close it, they already knew that.
adithyassekhar 1y ago
Good point, luckily there are no transitions for modals in this project.
jitl 1y ago
You should rethink your modal system if removing the controller component from the render tree doesn’t transition out
- chamomeal 1y ago
  I mean in react if it’s gone from the render tree, it’s gone. I know there are libs like transition-group but I honestly don’t understand how they work. And the “react way” is to have the UI reflect state. If the state says the modal is not being rendered, it should not be rendered
  - jitl 1y ago
    Yes, React’s main idea is f(state) -> UI; but what’s returned from render is a declarative specification of what the UI should be. It’s up to React (and library authors) to make sure the UI ends up as we specify without our app logic needing to be concerned with how that happens. I view managing transition out animations for a component removed from the render tree the same way: I’m happy if the incidental complexity is encapsulated in a library (either a third party one or something I write myself), rather than spread across the whole app. There are many high quality third party tools to help with this, such as Motion’s <AnimatePresence> (https://motion.dev/docs/react-animate-presence https://motion.dev/docs/react-animate-presence). I haven’t used the library you mentioned, but it seems somewhat unmaintained and isn’t compatible with react-dom@19. First party support is coming to React with the new <ViewTransition> component (https://react.dev/reference/react/ViewTransition https://react.dev/reference/react/ViewTransition). If you insist that only the React maintainers are allowed to diverge DOM state from the render tree or write code you don’t understand, you can adopt it today from react{,-dom}@experimental. It’s been available there since April (https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more#view-transitions https://react.dev/blog/2025/04/23/react-labs-view-transition...).
    - jitl 1y ago
      For anyone curious, here's a proof-of-concept of how to implement a <Modal> that manages its own transition out when it's unmounted using just ReactDOM.createPortal and React.useLayoutEffect. https://stackblitz.com/edit/react-modal-with-transition-out?devToolsHeight=33&file=src%2FApp.js https://stackblitz.com/edit/react-modal-with-transition-out?...
socalgal2 1y ago
You can add some TransitionManager that uses a bool prop whether or not to render its children and when the prop goes from true to false, keeps rendering its children for some amount of time.

So, win-win? I want a modal to get out of the way as fast as possible, any fade/transition animations are keeping me from what I want to look at. :)

chamomeal 1y ago
The designers don’t want to break the out transition, and the PM wants whatever the designer wants

akie 1y ago

Unless you set `isOpen` only when the transition has ended

debugnik 1y ago
Isn't isOpen = false what triggers the transition in the first place here?

abdusco 1y ago

Even when using view transitions? https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-s...

csande17 1y ago
The "Transitioning elements on DOM addition and removal" example in that article uses a setTimeout() to wait an extra 1000 milliseconds before removing the element from the DOM. If you immediately remove the element from the DOM (like would usually happen if you do {isOpen && <Modal />} in React), it'll vanish immediately and won't have time to play the transition.

btown 1y ago

You can create a ref that stores whether isOpen has ever been true, and condition on that, letting you lazily initialize the Modal and its contents while preserving out transitions. I’m honestly surprised this isn’t recommended a lot more often!

zarzavat 1y ago

Good. Transitions are meant to serve a purpose, showing what came from where. A modal doesn't need a transition, it should just disappear instantly. Like closing a window. The user is not helped by animating that something disappears when they close it, they already knew that.

adithyassekhar 1y ago

Good point, luckily there are no transitions for modals in this project.

jitl 1y ago

You should rethink your modal system if removing the controller component from the render tree doesn’t transition out

chamomeal 1y ago
I mean in react if it’s gone from the render tree, it’s gone. I know there are libs like transition-group but I honestly don’t understand how they work. And the “react way” is to have the UI reflect state. If the state says the modal is not being rendered, it should not be rendered
- jitl 1y ago
  Yes, React’s main idea is f(state) -> UI; but what’s returned from render is a declarative specification of what the UI should be. It’s up to React (and library authors) to make sure the UI ends up as we specify without our app logic needing to be concerned with how that happens. I view managing transition out animations for a component removed from the render tree the same way: I’m happy if the incidental complexity is encapsulated in a library (either a third party one or something I write myself), rather than spread across the whole app. There are many high quality third party tools to help with this, such as Motion’s <AnimatePresence> (https://motion.dev/docs/react-animate-presence https://motion.dev/docs/react-animate-presence). I haven’t used the library you mentioned, but it seems somewhat unmaintained and isn’t compatible with react-dom@19. First party support is coming to React with the new <ViewTransition> component (https://react.dev/reference/react/ViewTransition https://react.dev/reference/react/ViewTransition). If you insist that only the React maintainers are allowed to diverge DOM state from the render tree or write code you don’t understand, you can adopt it today from react{,-dom}@experimental. It’s been available there since April (https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more#view-transitions https://react.dev/blog/2025/04/23/react-labs-view-transition...).
  - jitl 1y ago
    For anyone curious, here's a proof-of-concept of how to implement a <Modal> that manages its own transition out when it's unmounted using just ReactDOM.createPortal and React.useLayoutEffect. https://stackblitz.com/edit/react-modal-with-transition-out?devToolsHeight=33&file=src%2FApp.js https://stackblitz.com/edit/react-modal-with-transition-out?...

socalgal2 1y ago

You can add some TransitionManager that uses a bool prop whether or not to render its children and when the prop goes from true to false, keeps rendering its children for some amount of time.