[bug]: useTransition not animating component on unmount

[dnorrstrand]

Which react-spring target are you using?

• [x] @react-spring/web
• [ ] @react-spring/three
• [ ] @react-spring/native
• [ ] @react-spring/konva
• [ ] @react-spring/zdog

What version of react-spring are you using?

9.5.5

What's Wrong?

I need to animate a self-destructing toast component which is supposed to slide up to position on mount and slide down and off the screen on unmount. I am using the code example from the new docs, but my component unmounts without the animation specified in the "leave" prop.

Here is my component code:

import React from "react";
import useTimeout from "../hooks/use-timeout";
import { useTransition, animated } from "@react-spring/web";

function TimedDismissableToast(props) {
    const { modalShow, setModalShow } = props; // modalShow.show is a boolean

    const transitions = useTransition(modalShow.show, {
        from: { y: window.innerHeight },
        enter: { y: window.innerHeight - 300 },
        leave: { y: window.innerHeight }
    });

    useTimeout(() => {
       // ...code to unmount the component
    }, modalShow.timeout);

    const styles = {
        left: "80px",
        // ...some more styles here
    };

    return transitions((style, item) => (
        <animated.div style={{ ...style, ...styles }}>
           // ...component's html
        </animated.div>
    ));


export default TimedDismissableToast;

Can anyone please help identify the problem and fix the unmount animation?

The docs for useTransition could also use some examples and a clearer explanation for each prop in the Reference section.

To Reproduce

Screen recording: link

Expected Behaviour

i expect the component to slide down and off the screen on unmounting.

Link to repo

not available, see code above

[joshuaellis]

Hey @dnorrstrand can you share how the component is used? I suspect the issue is you're unmounting the component and expecting it to animate.

Looking at your code you'd need to change modalShow.show to be false and do a callback to remove the component from the tree after the animation has finished. Alternatively, you could do a factory component that takes all your Toast notifications and use's their data as the source of useTransition which is something like this: https://codesandbox.io/s/github/pmndrs/react-spring/tree/master/demo/src/sandboxes/notification-hub

Secondly, have you checked out the beta docs? If you have feedback there's a discussion regarding it you can post in:

• https://beta.react-spring.dev/docs/components/use-transition
• https://github.com/pmndrs/react-spring/discussions/1931