Is there a way to set 100vw and 100vh for the style of child components while using useTransition?

[es-ki]

🤓 Question

The demo below is an example of using page transition animation with useTransition.
https://codesandbox.io/s/great-swanson-7c1v3?fontsize=14&hidenavigation=1&theme=dark
I am using v9.

Pressing the show button on pageA will mount the Show component.
100vw and 100vh are set for the style of the Show component. So I expect the Show component to be full screen.

However, the Show component does not go full screen.

Show components are now full-screen when useTransition is not used.

I want to make the Show component full screen while using useTransition. Is there a good way?

[AlexReff]

I don't understand what your question is, this seems like CSS issues, not related to react-spring.

The element is set to 100vw width and 100vh height. That's what's happening. Setting 100vh height or 100vw width doesn't magically change the position of the element to fullscreen it. You still have to do that yourself.

[es-ki]

Thanks for the comment.
I think it's a question that is hard to convey because it uses machine translation.
I'm sorry.

The CSS property of the Show component is set to position: fixed (and top: 0 and left: 0) in addition to 100vw and 100vh.
Isn't this enough to get full screen?

After changing the animation CSS property from transform to opacity, the Show component became full screen.
https://codesandbox.io/s/busy-cannon-exygs?fontsize=14&hidenavigation=1&theme=dark

And as I wrote in the question text, if you do not use useTransition (), the Show component will be full screen.
https://codesandbox.io/s/dazzling-lake-bx5r2?fontsize=14&hidenavigation=1&theme=dark

If opacity is set for animation, it will be full screen display, so it seems that the cause is not due to useTransition () but to using transform with useTransition ().