DEV Community

Discussion on: Super easy react mount/unmount animations with hooks

View post
Collapse
 
laurencefass profile image
laurence fass •

hi this doesnt work if i add a transition delay. it renders the child and then executes the animation after the delay. is there a way to fix this?

animation: ${show ? "fadeIn" : "fadeOut"} 1s linear 1s,

results in: codesandbox.io/s/react-easy-animat...

Collapse
 
michalczaplinski profile image
Michal Czaplinski •

Hi there!

The reason that this does not work as you expect is because the component is mounted and visible when it's waiting that one second for the animation to start. The 1s that you have added does not control whether the component is visible or not - it only delays the animation!

I would recommend that you add a setTimeout in the useEffect of the Fade component to delay mounting the children by your desired amount of time!

// Fade.js

  useEffect(() => {
    const timeout = setTimeout(() => {
      if (show) setRender(true);
    }, 1000); // <---- here you set your delay in miliseconds

    // Clear the timeout when the component unmounts 
    return () => clearTimeout(timeout);
  }, [show]);
Enter fullscreen mode Exit fullscreen mode

And here's the full codesandbox with the 1s delay: codesandbox.io/s/react-easy-animat...