useTransition's leave animation doesn't work with transform

[eden-lane]

I'm trying to move old elements to the right and move new elements from the left at the same time. Right now it doesn't work for some reason. I get animation for new elements, but old elements change opacity from 1 to 0, but they don't move at all.
Here is my useTransition hook usage:

const transitions = useTransition(currentTab, {
  key: currentTab,
  from: { transform: "translateX(-100%)", opacity: 0 },
  enter: { transform: "translateX(0)", opacity: 1 },
  leave: { transform: "translateX(100%)", opacity: 0 },
  reverse: currentTab === TABS.MYDAY
});

{transitions((styles, tab) => (
  <animated.div style={styles}>
    {tabItems[tab].map((item) => (
      <Item key={item}>{item}</Item>
    ))}
  </animated.div>
))}

reverse prop is also not working.

Here is codesandbox link: https://codesandbox.io/s/react-spring-animated-menu-z7uct?file=/src/App.tsx

[eden-lane]

The problem was in the enter option. You have to pass 0% instead of simple 0

[joshuaellis]

We've got a PR in the works to resolve this issue!