why are initial items not transitioned out using useTransition

Question

I am using react-spring's useTransition to transition between pages like this:

    const context = useContext(AppContext);
    const items = [context.page];
    const transitions = useTransition(items, item => item.label, {
        initial: {
            transform: 'translate3d(0,0,0)',
            opacity: 0.2,
        },
        from: {
            transform: 'translate3d(100%,0,0)',
            opacity: 1,
        },
        enter: { transform: 'translate3d(0,0,0)', opacity: 1 },
        leave: { transform: 'translate3d(-100%,0,0)', opacity: 1 },
    });

    return (
        <div className="app-content">
            {transitions.map(({ item, props, key }) => (
                <animated.div key={key} style={props}>
                    {renderPage(item.label)}
                </animated.div>
             )}
        </div>
    );
...

The initial page is rendered correctly with the 'initial' styles, but is not transitioned out using the 'leave' styles. After navigating to other pages they all transition like they should, even the initial page when returning there.

So, how do I get the initial page to transition out like the others?

edit: Added codesandbox showcasing the problem.

Answer 1

If i understand your intent correctly, you can just set the transform in the initial object to start from -0%:

initial: {
  transform: "translate3d(-0%,0,0)",
  opacity: 0.2
},