I've been working on a small website using react and wanted to animate the mobile menu coming in and out of view on state change. I've heard that react-spring useTransition is perfect for this use case and have been trying to figure it out for the past two days.
From what I understand, it should smoothly transition between from, enter, and leave objects when the component is mounted/unmounted but in my case, it just seems to snap suddenly instead. When I click the button to open the menu, instead of it transitioning between opacity:0 and opacity:1, the component suddenly appears and when I click the button to close it, it disappears. There is even a short delay on closing during which, I assume, the leave animation should be playing.
I have tried the useSpring instead, but that one doesn't work so well with components that are going to be unmounted as well and doesn't play the leaving animation. Have also tried adding and removing null as a second argument to useTransition function and using .map in render but as far as I am aware, those have been depreciated.
I have created a small code sample in codesandbox. https://codesandbox.io/s/react-spring-menu-dz4iq
I'm using the latest react-spring(9.2) and google chrome browser if that's helpful info. Hope some of you can point me in the right direction.
