Transition variant with visibility:hidden instead of display:none

[ivan-kleshnin]

Transition component is very powerful. It currently supports 2 "modes" controlled by unmount prop. When unmount is true the Transition node is (eventually) removed from the DOM after the show becomes false. When unmount is false the Transition node (eventually) gets display:none. That's my understand – pls. correct if I'm wrong...

I'm working on an alert stack, something like https://react-hot-toast.com/ where alert elements should keep their heights after they become invisible. For some time – to prevent new alerts added below from jumping to above positions. Hidden DOM elements are "garbage collected" separately, not a Transition job.

It could be made possible by adding a 3rd Transition mode with visibility: hidden. Another example from the same project is harder to describe, but it also requires a hidden element to preserve the original height.

The workaround I've found is to add !block to leaveFrom which basically cancels the display: none added by Transition:

leaveFrom="opacity-100"
leaveTo="opacity-0 !block"

Not sure about potential pitfalls of this, though 🤔

[ziyuang]

Does it still work on 2.1?

[ivan-kleshnin]

No idea, t.b.h. I'm not a fan of too many abstractions, like in v2. So I'm on v1 for now.