Transition between 2 components

[ViktorsDolzenko]

Hi!, can someone assist me how to make a transition between 2 components, in documentation only about animated.div, but how to make a transition between 2 components?

 const [toggled, setToggled] = useState(false);

    const transitions = useTransition(toggled, {
        from: { position: 'absolute', opacity: 0 },
        enter: { opacity: 1 },
        leave: { opacity: 0 },
        delay: 200,
    })

<div onClick={() => setToggled(!toggled)} className="card" ref={(el:any) => (card = el)}>
                    {transitions(({opacity}, item) =>
                         !item ? (
                        <InviteTitle names={'lol'} />
                             )
                          : (
                             <InviteText />
                             )
                    )}
                </div>

[Aaron-Storm]

I have not been able to get it to work properly using the animated component approach so far .
The initial component does not decrease opacity for some reason and thus stays mounted until the enter animation of the second component finishes.
If you wrap the components each in an animated div and add some CSS depending on your UI it works as expected. Here a codesandbox. I will update as soon as I found out how to prevent this behavior.

[joshuaellis]

Expanding on @Aaron-Storm's example. You can wrap the component in animated as described in the documentation here – https://react-spring.io/basics#finally-tie-the-animated-values-to-your-view

so it looks like:

const AnimatedApple = animated(Apple)

However, the component, must pass the style props to actual node e.g. the div, you can see this in effect in the updated sandbox here – https://codesandbox.io/s/react-spring-scale-api-forked-8fkep?file=/src/ToggleComponent.jsx