React - animate mount and unmount of a single component

Question

Something this simple should be easily accomplished, yet I'm pulling my hair out over how complicated it is.

All I want to do is animate the mounting & unmounting of a React component, that's it. Here's what I've tried so far and why each solution won't work:

1. ReactCSSTransitionGroup - I'm not using CSS classes at all, it's all JS styles, so this won't work.
2. ReactTransitionGroup - This lower level API is great, but it requires you to use a callback when the animation is complete, so just using CSS transitions won't work here. There are always animation libraries, which leads to the next point:
3. GreenSock - The licensing is too restrictive for business use IMO.
4. React Motion - This seems great, but TransitionMotion is extremely confusing and overly complicated for what I need.
5. Of course I can just do trickery like Material UI does, where the elements are rendered but remain hidden (left: -10000px) but I'd rather not go that route. I consider it hacky, and I want my components to unmount so they clean up and are not cluttering up the DOM.

I want something that's easy to implement. On mount, animate a set of styles; on unmount, animate the same (or another) set of styles. Done. It also has to be high performance on multiple platforms.

I've hit a brick wall here. If I'm missing something and there's an easy way to do this, let me know.

Ceremonious

What kind of animation are we talking here? – Blocked

Just something simple, like a CSS opacity fade in and a transform: scale – Ceremonious

Point 1 and 2 confuses me. What kind of animations are you using? JS transitions or CSS transitions ? – Blocked

Don't confuse CSS styles/classes (e.g. .thing { color: #fff; }) with JS styles (const styles = { thing: { color: '#fff' } })) – Ceremonious

But the problem is, when you try to change the style using javascript, you're actually replacing the style of a element which won't give any transition. – Blocked

I am pretty sure you can use a combination of ReactTransitionGroup and GSAP. I have posted similar answers before which are here and here. Please go through them and let me know if anything is unclear. – Crashland

See above, I mention GSAP/GreenSock, which I don't want to use. – Ceremonious

@PraneshRavi (regarding replacing the style and won't transition) - That's not actually true. See this example: jsfiddle.net/mqkhh3qq – Ceremonious

@Ceremonious hmm, now I am curious what made you conclude the result that you concluded for GSAP. – Crashland

@TahirAhmed GSAP costs $150/year for commercial use where you charge access to a web-based service. It's just something I'm not interested in at the moment. – Ceremonious

@Ceremonious I am guessing you have already been here, here and here and you still came to same conclusion. – Crashland

@TahirAhmed Yes, of course – Ceremonious

@TahirAhmed " If end users are charged a usage/access/license fee, please sign up for a "Business Green" Club GreenSock membership" – Ceremonious

@Ceremonious fair enough. thanks. – Crashland

@Ceremonious I still have one more link to share with you :) – Crashland

@TahirAhmed Oh nice! Lemme check this out in detail when I have some time – Ceremonious

Concerning ReactTransitionGroup you said: This lower level API is great, but it requires you to use a callback when the animation is complete, could you extrapolate what you thought about please? – Undersize

For thoses who want, ReactCSSTransitionGroup can work combined to styled-component – Undersize

Answer 1

This is a bit lengthy but I've used all the native events and methods to achieve this animation. No ReactCSSTransitionGroup, ReactTransitionGroup and etc.

Things I've used

• React lifecycle methods
• onTransitionEnd event

How this works

• Mount the element based on the mount prop passed(mounted) and with default style(opacity: 0)
• After mount or update, use componentDidMount (componentWillReceiveProps for further updates)to change the style (opacity: 1) with a timeout(to make it async).
• During unmount, pass a prop to the component to identify unmount, change the style again(opacity: 0), onTransitionEnd, remove unmount the element from the DOM.

Continue the cycle.

Go through the code, you'll understand. If any clarification is needed, please leave a comment.

class App extends React.Component{
  constructor(props) {
    super(props)
    this.transitionEnd = this.transitionEnd.bind(this)
    this.mountStyle = this.mountStyle.bind(this)
    this.unMountStyle = this.unMountStyle.bind(this)
    this.state ={ //base css
      show: true,
      style :{
        fontSize: 60,
        opacity: 0,
        transition: 'all 2s ease',
      }
    }
  }
  
  componentWillReceiveProps(newProps) { // check for the mounted props
    if(!newProps.mounted)
      return this.unMountStyle() // call outro animation when mounted prop is false
    this.setState({ // remount the node when the mounted prop is true
      show: true
    })
    setTimeout(this.mountStyle, 10) // call the into animation
  }
  
  unMountStyle() { // css for unmount animation
    this.setState({
      style: {
        fontSize: 60,
        opacity: 0,
        transition: 'all 1s ease',
      }
    })
  }
  
  mountStyle() { // css for mount animation
    this.setState({
      style: {
        fontSize: 60,
        opacity: 1,
        transition: 'all 1s ease',
      }
    })
  }
  
  componentDidMount(){
    setTimeout(this.mountStyle, 10) // call the into animation
  }
  
  transitionEnd(){
    if(!this.props.mounted){ // remove the node on transition end when the mounted prop is false
      this.setState({
        show: false
      })
    }
  }
  
  render() {
    return this.state.show && <h1 style={this.state.style} onTransitionEnd={this.transitionEnd}>Hello</h1> 
  }
}

class Parent extends React.Component{
  constructor(props){
    super(props)
    this.buttonClick = this.buttonClick.bind(this)
    this.state = {
      showChild: true,
    }
  }
  buttonClick(){
    this.setState({
      showChild: !this.state.showChild
    })
  }
  render(){
    return <div>
        <App onTransitionEnd={this.transitionEnd} mounted={this.state.showChild}/>
        <button onClick={this.buttonClick}>{this.state.showChild ? 'Unmount': 'Mount'}</button>
      </div>
  }
}

ReactDOM.render(<Parent />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Blocked

Thanks for this! Where did you learn about onTransitionEnd? I don't see it in the React docs. – Ceremonious

@Ceremonious facebook.github.io/react/docs/events.html It's under the transition events. – Blocked

How did you know what it did though, the documentation doesn't explain anything. Another question: how did you know componentWillReceiveProps can return something? Where can I read more on that? – Ceremonious

@Ceremonious onTransitionEnd is a native JavaScript event. You can google about it. facebook.github.io/react/docs/… will give you an idea about componentWillReceiveProps. – Blocked

I saw the documentation on componentWillReceiveProps, it doesn't mention returning anything. Weird. – Ceremonious

@Ceremonious you won't return anything but you can update the state based on the newProp. The reason I use return is to prevent the code below return from executing. It's a better way of writing if else. With a reaturn in the if, you don't need a else statement. – Blocked

Oh I got it - you're just executing the method and returning in one shot. – Ceremonious

Thanks for your awesome answer, Pranesh! :) I learned a lot from this. – Ceremonious

@Ceremonious Yes, to avoid else statement. ComponentWillReceiveProps doesn't take any return value. So, it won't cause any problem. – Blocked

BTW I think there's a mistake in your code. In your Parent component, you reference this.transitionEnd – Ceremonious

The example above doesn't check if the transitionEnd event comes from that element or a child one. You should add a className="my-animation" and check inside transitionEnd(e){ that e.target.className === "my-animation" otherwise it can be mess up – Lizarraga

This doesn't unmount App though, but App simply knows when to not render anything. – Thuthucydides

componentWillReceiveProps is now deprecated as unsafe. It would be good for someone to update this answer to use componentDidUpdate. – Sclera

Answer 2

Here is my solution using the new hooks API (with TypeScript), based on this post, for delaying the component's unmount phase:

function useDelayUnmount(isMounted: boolean, delayTime: number) {
    const [ shouldRender, setShouldRender ] = useState(false);

    useEffect(() => {
        let timeoutId: number;
        if (isMounted && !shouldRender) {
            setShouldRender(true);
        }
        else if(!isMounted && shouldRender) {
            timeoutId = setTimeout(
                () => setShouldRender(false), 
                delayTime
            );
        }
        return () => clearTimeout(timeoutId);
    }, [isMounted, delayTime, shouldRender]);
    return shouldRender;
}

Usage:

const Parent: React.FC = () => {
    const [ isMounted, setIsMounted ] = useState(true);
    const shouldRenderChild = useDelayUnmount(isMounted, 500);
    const mountedStyle = {opacity: 1, transition: "opacity 500ms ease-in"};
    const unmountedStyle = {opacity: 0, transition: "opacity 500ms ease-in"};

    const handleToggleClicked = () => {
        setIsMounted(!isMounted);
    }

    return (
        <>
            {shouldRenderChild && 
                <Child style={isMounted ? mountedStyle : unmountedStyle} />}
            <button onClick={handleToggleClicked}>Click me!</button>
        </>
    );
}

CodeSandbox link.

Lakshmi

elegant solution, would be great if you have added some comments :) – Undersize

also why use typescrypt's extension since it works well in javascript's extension? – Undersize

also your console returns "cannot find namespace NodeJS timeout" – Undersize

@Webwoman Thanks for your comments. I can't recreate your reported problem with "NodeJS timeout", see my CodeSandbox link below the answer. Regarding TypeScript, I personally prefer using it over JavaScript, although both are viable of course. – Lakshmi

@Webwoman for some reason the typescript is treating the hook file as node.js file so it's forcing to let timeoutId: NodeJS.Timeout; instead of number type. try let timeoutId: ReturnType<typeof setTimeout>; or try window.setTimeout which has number type – Carbo

To fix the TypeScript error Type 'Timeout' is not assignable to type 'number'., add window. in front of the setTimeout. – Dyewood

I was looking for a clean hook solution like this and this implementation is the cleanest one I've seen. Just one simple hook. – Lave

I like this solution, but for me, animation works only on unmount, on mount my component appears immediately, what can be wrong? – Mcmullen

@GingerBread could you provide a code sample (e.g. CodeSandbox)? In the link I provided, the enter animation works properly. – Lakshmi

I'm having the same problem as @GingerBread when using transition instead of animation: codesandbox.io/p/sandbox/… – Matherne

I just realize that this is only for the un-mount animation. The mount-in transition is handle only by the CSS animation. – Matherne

@Matherne Yes that's right, there was never a problem to have animations on mount with react. It's a regular animation with CSS. The problem is with unmount when using conditional rendering. React immediately deletes the element from the DOM, with no time for an unmount animation. This is why I'm using a unmount delay in this answer. – Lakshmi

Answer 3

I countered this problem during my work, and simple as it seemed, it is really not in React. In a normal scenario where you render something like:

this.state.show ? {childen} : null;

as this.state.show changes the children are mounted/unmounted right away.

One approach I took is creating a wrapper component Animate and use it like

<Animate show={this.state.show}>
  {childen}
</Animate>

now as this.state.show changes, we can perceive prop changes with getDerivedStateFromProps(componentWillReceiveProps) and create intermediate render stages to perform animations.

We start with Static Stage when the children is mounted or unmounted.

Once we detect the show flag changes, we enter Prep Stage where we calculate necessary properties like height and width from ReactDOM.findDOMNode.getBoundingClientRect().

Then entering Animate State we can use css transition to change height, width and opacity from 0 to the calculated values (or to 0 if unmounting).

At the end of transition, we use onTransitionEnd api to change back to Static stage.

There are much more details to how the stages transfer smoothly but this could be overall idea:)

If anyone interested, I created a React library https://github.com/MingruiZhang/react-animate-mount to share my solution. Any feedback welcome:)

Brunelle

Thank you for your feedback, sorry for crude answer earlier. I added more detail and a diagram to my answer, hope this can be more helpful to others. – Brunelle

@MingruiZhang It's good to see that you've taken the comments positively and improved your answer. It's very refreshing to see. Good work. – Piggish

Answer 4

Using the knowledge gained from Pranesh's answer, I came up with an alternate solution that's configurable and reusable:

const AnimatedMount = ({ unmountedStyle, mountedStyle }) => {
  return (Wrapped) => class extends Component {
    constructor(props) {
      super(props);
      this.state = {
        style: unmountedStyle,
      };
    }

    componentWillEnter(callback) {
      this.onTransitionEnd = callback;
      setTimeout(() => {
        this.setState({
          style: mountedStyle,
        });
      }, 20);
    }

    componentWillLeave(callback) {
      this.onTransitionEnd = callback;
      this.setState({
        style: unmountedStyle,
      });
    }

    render() {
      return <div
        style={this.state.style}
        onTransitionEnd={this.onTransitionEnd}
      >
        <Wrapped { ...this.props } />
      </div>
    }
  }
};

Usage:

import React, { PureComponent } from 'react';

class Thing extends PureComponent {
  render() {
    return <div>
      Test!
    </div>
  }
}

export default AnimatedMount({
  unmountedStyle: {
    opacity: 0,
    transform: 'translate3d(-100px, 0, 0)',
    transition: 'opacity 250ms ease-out, transform 250ms ease-out',
  },
  mountedStyle: {
    opacity: 1,
    transform: 'translate3d(0, 0, 0)',
    transition: 'opacity 1.5s ease-out, transform 1.5s ease-out',
  },
})(Thing);

And finally, in another component's render method:

return <div>
  <ReactTransitionGroup>
    <Thing />
  </ReactTransitionGroup>
</div>

Ceremonious

And how do you mount/unmount @ffxsam? – Aleta

How is componentWillLeave() and componentWillEnter() getting called in AnimatedMount? – Newspaperwoman

Doesn't works for me, here my sandbox: codesandbox.io/s/p9m5625v6m – Undersize

This can't possibly work since the methods are uncalled, and as expected, it doesn't work. – Doloroso

I think this answer is outdated ... It seems like this example requires ReactTransitionGroup in the background, which used to be part of React and now has a separate package. But that package also provides Transition and CSSTransition which would be more appropriate here. – Wacker

Answer 5

Framer motion

Install framer-motion from npm.

import { motion, AnimatePresence } from "framer-motion"

export const MyComponent = ({ isVisible }) => (
  <AnimatePresence>
    {isVisible && (
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
      />
    )}
  </AnimatePresence>
)

Bryozoan

Answer 6

I think using Transition from react-transition-group is probably the easiest way to track mounting/unmounting. It is incredibly flexible. I'm using some classes to show how easy it is to use but you can definitely hook up your own JS animations utilizing addEndListener prop - which I've had a lot of luck using GSAP with as well.

Sandbox: https://codesandbox.io/s/k9xl9mkx2o

And here's my code.

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Transition } from "react-transition-group";
import styled from "styled-components";

const H1 = styled.h1`
  transition: 0.2s;
  /* Hidden init state */
  opacity: 0;
  transform: translateY(-10px);
  &.enter,
  &.entered {
    /* Animate in state */
    opacity: 1;
    transform: translateY(0px);
  }
  &.exit,
  &.exited {
    /* Animate out state */
    opacity: 0;
    transform: translateY(-10px);
  }
`;

const App = () => {
  const [show, changeShow] = useState(false);
  const onClick = () => {
    changeShow(prev => {
      return !prev;
    });
  };
  return (
    <div>
      <button onClick={onClick}>{show ? "Hide" : "Show"}</button>
      <Transition mountOnEnter unmountOnExit timeout={200} in={show}>
        {state => {
          let className = state;
          return <H1 className={className}>Animate me</H1>;
        }}
      </Transition>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Electrolysis

If you use styled components, you can simply pass showprop to H1 and do all logic inside styled component. Like...animation: ${({ show }) => show ? entranceKeyframes : exitKeyframes} 300ms ease-out forwards; – Overflow

This solution doesn't work as intended for me. If I set the transition / timeout times to 2s / 2000ms I can clearly see that when the enter animation is triggered, the element stays hidden for 2s, and only then transitions in for 2s. – Wacker

Yeah, interesting point Marko. I looked at the docs and you have some play with the timeout and can pass an object instead something like timeout={{exit: 2000, enter: 0}} will probably work better for your use case reactcommunity.org/react-transition-group/… – Electrolysis

Answer 7

For those considering react-motion, animating a single component when it mounts and unmounts can be overwhelming to set up.

There's a library called react-motion-ui-pack that makes this process a lot easier to start with. It's a wrapper around react-motion, which means you get all the benefits from the library (i.e. you are able to interrupt the animation, have multiple unmounts happen at the same time).

Usage:

import Transition from 'react-motion-ui-pack'

<Transition
  enter={{ opacity: 1, translateX: 0 }}
  leave={{ opacity: 0, translateX: -100 }}
  component={false}
>
  { this.state.show &&
      <div key="hello">
        Hello
      </div>
  }
</Transition>

Enter defines what the end state of the component should be; leave is the style that is applied when the component is unmounted.

You might find that once you have used the UI pack a couple of times, the react-motion library might not be as daunting anymore.

Piceous

Project is no longer maintained (2018) – Cool

Answer 8

You can do this with React Transition Group. It gives you CSS classes, so you can write your animation code in those CSS classes.

Follow this simple example

import {CSSTransition } from 'react-transition-group';//This should be imported
import './AnimatedText.css';

const AnimatedText = () => {
    const [showText, setShowText] = useState(false); //By default text will be not shown

    //Handler to switch states
    const switchHandler = () =>{
        setShowText(!showText);
    };

    return (
        //in : pass your state here, it will used by library to toggle. It should be boolean
        //timeout: your amination total time(it should be same as mentioned in css)
        //classNames: give class name of your choice, library will prefix it with it's animation classes
        //unmountOnExit: Component will be unmounted when your state changes to false
        <CSSTransition in={showText} timeout={500} classNames='fade' unmountOnExit={true}>
            <h1>Animated Text</h1>
        </CSSTransition>  
        <button onClick={switchHandler}>Show Text</button>                  
    );
};

export default AnimatedText;

Now, let's write the animation in CSS file(AnimatedText.css), Remember classNames property(in this case fade)

//fade class should be prefixed

/*****Fade In effect when component is mounted*****/
//This is when your animation starts
fade-enter {
  opacity: 0;
}

//When your animation is active
.fade-enter.fade-enter-active {
  opacity: 1;
  transition: all 500ms ease-in;
}
/*****Fade In effect when component is mounted*****/


/*****Fade Out effect when component is unmounted*****/
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: all 500ms ease-out;
}

/*****Fade Out effect when component is unmounted*****/

There's also a appear class, which can be used when your component loads for the first time. Check documentation for more details

Legalize

Answer 9

Animating enter and exit transitions is much easier with react-move.

example on codesandbox

Operose

Answer 10

You can use React SyntheticEvent for that.

With events like onAnimationEnd or onTransitionEnd you can accomplish that.

React Docs: https://reactjs.org/docs/events.html#animation-events

Code Example: https://dev.to/michalczaplinski/super-easy-react-mount-unmount-animations-with-hooks-4foj

Insect

Answer 11

I've looking for solution without any extra dependencies and here is hook which works fine for me:

import { useState, useEffect, CSSProperties } from "react";

export function useAnimatedUnmount(isMounted: boolean, delayTime: number) {
  const mountedStyle: CSSProperties = {
    opacity: 1,
    transform: "scale(1)",
    transition: `all ${delayTime}ms ease-out`,
  };
  const unmountedStyle: CSSProperties = {
    opacity: 0,
    transform: "scale(0)",
    transition: `all ${delayTime}ms ease-in`,
  };

  const [style, setStyle] = useState(isMounted ? mountedStyle : unmountedStyle);
  const [showComponent, setShowComponent] = useState(isMounted);

  useEffect(() => {
    let timeoutId: NodeJS.Timeout;
    if (isMounted) {
      setShowComponent(true);
      timeoutId = setTimeout(() => setStyle(mountedStyle), 10);
    } else {
      timeoutId = setTimeout(() => setShowComponent(false), delayTime);
      setStyle(unmountedStyle);
    }
    return () => clearTimeout(timeoutId);
  }, [isMounted, delayTime]);
  return { showComponent, style };
}

and here is implementation:

export default function App() {
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const { showComponent, style } = useAnimatedUnmount(isDialogOpen, 200);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <button onClick={() => setIsDialogOpen(!isDialogOpen)}>
        {isDialogOpen ? "CLose" : "Open"}
      </button>
      {showComponent && (
        <h2 style={style}>Start editing to see some magic happen!</h2>
      )}
    </div>
  );
}

codesandbox link - https://codesandbox.io/s/lucid-tree-sij1wd?file=/src/App.tsx

Mcmullen

Answer 12

Here my 2cents: thanks to @deckele for his solution. My solution is based on his, it's the stateful's component version, fully reusable.

here my sandbox: https://codesandbox.io/s/302mkm1m.

here my snippet.js:

import ReactDOM from "react-dom";
import React, { Component } from "react";
import style from  "./styles.css"; 

class Tooltip extends Component {

  state = {
    shouldRender: false,
    isMounted: true,
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (this.state.shouldRender !== nextState.shouldRender) {
      return true
    }
    else if (this.state.isMounted !== nextState.isMounted) {
      console.log("ismounted!")
      return true
    }
    return false
  }
  displayTooltip = () => {
    var timeoutId;
    if (this.state.isMounted && !this.state.shouldRender) {
      this.setState({ shouldRender: true });
    } else if (!this.state.isMounted && this.state.shouldRender) {
      timeoutId = setTimeout(() => this.setState({ shouldRender: false }), 500);
      () => clearTimeout(timeoutId)
    }
    return;
  }
  mountedStyle = { animation: "inAnimation 500ms ease-in" };
  unmountedStyle = { animation: "outAnimation 510ms ease-in" };

  handleToggleClicked = () => {
    console.log("in handleToggleClicked")
    this.setState((currentState) => ({
      isMounted: !currentState.isMounted
    }), this.displayTooltip());
  };

  render() {
    var { children } = this.props
    return (
      <main>
        {this.state.shouldRender && (
          <div className={style.tooltip_wrapper} >
            <h1 style={!(this.state.isMounted) ? this.mountedStyle : this.unmountedStyle}>{children}</h1>
          </div>
        )}

        <style>{`

           @keyframes inAnimation {
    0% {
      transform: scale(0.1);
      opacity: 0;
    }
    60% {
      transform: scale(1.2);
      opacity: 1;
    }
    100% {
      transform: scale(1);  
    }
  }

  @keyframes outAnimation {
    20% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(0);
      opacity: 0;
    }
  }
          `}
        </style>
      </main>
    );
  }
}


class App extends Component{

  render(){
  return (
    <div className="App"> 
      <button onClick={() => this.refs.tooltipWrapper.handleToggleClicked()}>
        click here </button>
      <Tooltip
        ref="tooltipWrapper"
      >
        Here a children
      </Tooltip>
    </div>
  )};
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Undersize

Answer 13

Here's how I solved this in 2019, while making a loading spinner. I'm using React functional components.

I have a parent App component that has a child Spinner component.

App has state for whether the app is loading or not. When the app is loading, Spinner is rendered normally. When the app is not loading (isLoading is false) Spinner is rendered with the prop shouldUnmount.

App.js:

import React, {useState} from 'react';
import Spinner from './Spinner';

const App = function() {
    const [isLoading, setIsLoading] = useState(false);

    return (
        <div className='App'>
            {isLoading ? <Spinner /> : <Spinner shouldUnmount />}
        </div>
    );
};

export default App;

Spinner has state for whether it's hidden or not. In the beginning, with default props and state, Spinner is rendered normally. The Spinner-fadeIn class animates it fading in. When Spinner receives the prop shouldUnmount it renders with the Spinner-fadeOut class instead, animating it fading out.

However I also wanted the component to unmount after fading out.

At this point I tried using the onAnimationEnd React synthetic event, similar to @pranesh-ravi's solution above, but it didn't work. Instead I used setTimeout to set the state to hidden with a delay the same length as the animation. Spinner will update after the delay with isHidden === true, and nothing will be rendered.

The key here is that the parent doesn't unmount the child, it tells the child when to unmount, and the child unmounts itself after it takes care of its unmounting business.

Spinner.js:

import React, {useState} from 'react';
import './Spinner.css';

const Spinner = function(props) {
    const [isHidden, setIsHidden] = useState(false);

    if(isHidden) {
        return null

    } else if(props.shouldUnmount) {
        setTimeout(setIsHidden, 500, true);
        return (
            <div className='Spinner Spinner-fadeOut' />
        );

    } else {
        return (
            <div className='Spinner Spinner-fadeIn' />
        );
    }
};

export default Spinner;

Spinner.css:

.Spinner {
    position: fixed;
    display: block;
    z-index: 999;
    top: 50%;
    left: 50%;
    margin: -40px 0 0 -20px;
    height: 40px;
    width: 40px;
    border: 5px solid #00000080;
    border-left-color: #bbbbbbbb;
    border-radius: 40px;
}

.Spinner-fadeIn {
    animation: 
        rotate 1s linear infinite,
        fadeIn .5s linear forwards;
}

.Spinner-fadeOut {
    animation: 
        rotate 1s linear infinite,
        fadeOut .5s linear forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

Ion

Answer 14

I was also in dire need of single component Animation . I tired using React Motion but i was pulling my hairs for such a trivial issue.. (i thing). After some googling i came across this post on their git repo . Hope it helps someone..

Referenced From & also the credit. This works for me as of now. My use case was a modal to animate and unmount in case of load and unload.

class Example extends React.Component {
  constructor() {
    super();
    
    this.toggle = this.toggle.bind(this);
    this.onRest = this.onRest.bind(this);

    this.state = {
      open: true,
      animating: false,
    };
  }
  
  toggle() {
    this.setState({
      open: !this.state.open,
      animating: true,
    });
  }
  
  onRest() {
    this.setState({ animating: false });
  }
  
  render() {
    const { open, animating } = this.state;
    
    return (
      <div>
        <button onClick={this.toggle}>
          Toggle
        </button>
        
        {(open || animating) && (
          <Motion
            defaultStyle={open ? { opacity: 0 } : { opacity: 1 }}
            style={open ? { opacity: spring(1) } : { opacity: spring(0) }}
            onRest={this.onRest}
          >
            {(style => (
              <div className="box" style={style} />
            ))}
          </Motion>
        )}
      </div>
    );
  }
}

Xanthochroid

Answer 15

This can be done easily using the CSSTransition component from react-transition-group, which is just like the libraries you mentioned. The trick is you need to wrap the CSSTransition component without a show/hide mechanism like you typically would.i.e. {show && <Child>}... Otherwise you are hiding the animation and it won't work. Example:

ParentComponent.js

import React from 'react';
import {CSSTransition} from 'react-transition-group';

function ParentComponent({show}) {
return (
  <CSSTransition classes="parentComponent-child" in={show} timeout={700}>
    <ChildComponent>
  </CSSTransition>
)}


ParentComponent.css

// animate in
.parentComponent-child-enter {
  opacity: 0;
}
.parentComponent-child-enter-active {
  opacity: 1;
  transition: opacity 700ms ease-in;
}
// animate out
.parentComponent-child-exit {
  opacity: 1;
}
.parentComponent-child-exit-active {
  opacity: 0;
  transition: opacity 700ms ease-in;
}

Distinguishing

Answer 16

I know there are a lot of answers here, but I still did not find one that suits my needs. I want:

• Functional components
• A solution that'll allow my components to easily fade in/out when they're mounted/unmounted.

After many hours of fiddling, I have a solution that works I'd say 90%. I've written the limitation in a comment block in the code below. I'd still love a better solution, but this is the best I've found, including the other solutions here.

const TIMEOUT_DURATION = 80 // Just looked like best balance of silky smooth and stop delaying me.

// Wrap this around any views and they'll fade in and out when mounting /
// unmounting.  I tried using <ReactCSSTransitionGroup> and <Transition> but I
// could not get them to work.  There is one major limitation to this approach:
// If a component that's mounted inside of <Fade> has direct prop changes,
// <Fade> will think that it's a new component and unmount/mount it.  This
// means the inner component will fade out and fade in, and things like cursor
// position in forms will be reset. The solution to this is to abstract <Fade>
// into a wrapper component.

const Fade: React.FC<{}> = ({ children }) => {
  const [ className, setClassName ] = useState('fade')
  const [ newChildren, setNewChildren ] = useState(children)

  const effectDependency = Array.isArray(children) ? children : [children]

  useEffect(() => {
    setClassName('fade')

    const timerId = setTimeout(() => {
      setClassName('fade show')
      setNewChildren(children)
    }, TIMEOUT_DURATION)

    return () => {
      clearTimeout(timerId)
    }   

  }, effectDependency)

  return <Container fluid className={className + ' p-0'}>{newChildren}</Container>
}

If you have a component you want to fade in/out, wrap it in <Fade> Ex. <Fade><MyComponent/><Fade>.

Note that this uses react-bootstrap for the class names and for <Container/>, but both could be easily replaced with custom CSS and a regular old <div>.

Turki

Answer 17

If I use Velocity or AnimeJS library to animate node directly (instead of css or setTimeout), then I found out I can design a hook to provide the animation status on and function onToggle to kick off the animation (ex. slidedown, fade).

Basically what the hook does is to toggle on and off the animation, and afterwards update the on accordingly. Therefore we can get the status of the animation accurately. Without doing so would reply on a ad-hoc duration.

/**
 * A hook to provide animation status.
 * @class useAnimate
 * @param {object} _                props
 * @param {async} _.animate         Promise to perform animation
 * @param {object} _.node           Dom node to animate
 * @param {bool} _.disabled         Disable animation
 * @returns {useAnimateObject}      Animate status object
 * @example
 *   const { on, onToggle } = useAnimate({
 *    animate: async () => { },
 *    node: node
 *  })
 */

import { useState, useCallback } from 'react'

const useAnimate = ({
  animate, node, disabled,
}) => {
  const [on, setOn] = useState(false)

  const onToggle = useCallback(v => {
    if (disabled) return
    if (v) setOn(true)
    animate({ node, on: v }).finally(() => {
      if (!v) setOn(false)
    })
  }, [animate, node, disabled, effect])

  return [on, onToggle]
}

export default useAnimate

The usage is the following,

  const ref = useRef()
  const [on, onToggle] = useAnimate({
    animate: animateFunc,
    node: ref.current,
    disabled
  })
  const onClick = () => { onToggle(!on) }

  return (
      <div ref={ref}>
          {on && <YOUROWNCOMPONENT onClick={onClick} /> }
      </div>
  )

and the animate implementation could be,

import anime from 'animejs'

const animateFunc = (params) => {
  const { node, on } = params
  const height = on ? 233 : 0
  return new Promise(resolve => {
    anime({
      targets: node,
      height,
      complete: () => { resolve() }
    }).play()
  })
}

Aglitter

Answer 18

You could always use React lifecycle methods but react-transition-group is by far the most convenient library for animations I have come across, Whether you are using styled-components or plain css. It is especially useful when you want to track the mounting and unmounting of your component and render animations accordingly. Use Transition with styled-components and CSSTransition when you are using plain css classnames.

Downspout

Answer 19

If you are looking for simple hooks example:

import React, { useEffect, useReducer } from "react";
import ReactDOM from "react-dom";

const ANIMATION_TIME = 2 * 1000;

function Component() {
  const [isMounted, toggleMounted] = useReducer((p) => !p, true);
  const [isAnimateAnmount, toggleAnimateUnmount] = useReducer((p) => !p, false);
  const [isVisible, toggleVisible] = useReducer((p) => (p ? 0 : 1), 0);

  useEffect(() => {
    if (isAnimateAnmount) {
      toggleVisible();
      toggleAnimateUnmount();
      setTimeout(() => {
        toggleMounted();
      }, ANIMATION_TIME);
    }
  }, [isAnimateAnmount]);

  useEffect(() => {
    toggleVisible();
  }, [isMounted]);

  return (
    <>
      <button onClick={toggleAnimateUnmount}>toggle</button>
      <div>{isMounted ? "Mounted" : "Unmounted"}</div>
      {isMounted && (
        <div
          style={{
            fontSize: 60,
            opacity: isVisible,
            transition: "all 2s ease"
          }}
        >
          Example
        </div>
      )}
    </>
  );
}

Repulse

Answer 20

I created a general purpose WrapperComponent called MountAnimation so that you can animate elements in and out without always having to write the same thing over and over. It uses CSSTransitions under the hood so you need to install that.

1. Install dependecies

npm install react-transition-group

2. Create component in one of your folders

import { CSSTransition } from "react-transition-group"

export const MountAnimation = ({
  children,
  timeout = 300, // MATCH YOUR DEFAULT ANIMATION DURATION
  isVisible = false,
  unmountOnExit = true,
  classNames = "transition-translate-y", // ADD YOUR DEFAULT ANIMATION
  ...restProps
}) => {
  return (
    <CSSTransition
      in={isVisible}
      timeout={timeout}
      classNames={classNames}
      unmountOnExit={unmountOnExit}
      {...restProps}
    >
      <div>{children}</div>
    </CSSTransition>
  )
}

3. Simply use it like this:

import { MountAnimation } from '../../path/to/component'

...

const [isElementVisible, setIsElementVisible] = useState(false)

return (
    <MountAnimation isVisible={isElementVisible}>
       // your content here
    </MountAnimation>

)

4. (Go creative here) You need to declare your animation in your CSS file. Make sure you declare this in a globally available CSS file if you are code-splitting. In this example I am using the following animation:

.transition-translate-y-enter {
  opacity: 0;
  transform: translateY(-5px);
}
.transition-translate-y-enter-active {
  opacity: 1;
  transform: translateY(0px);
  transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}
.transition-translate-y-exit {
  opacity: 1;
  transform: translateY(0px);
}
.transition-translate-y-exit-active {
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}

Here is a live example of this implementation:

https://codesandbox.io/s/vibrant-elion-ngfzr?file=/src/App.js

Chicalote

Answer 21

rewrote of https://mcmap.net/q/157042/-react-animate-mount-and-unmount-of-a-single-component

please if you click like on this comment, like the parent too, thank you

clear js

import {useState, useEffect} from 'react';

const useDelayUnmount = (isMounted, msDelay = 500)=>{
    const [shouldRender, setShouldRender] = useState(false);

    useEffect(()=>{
        let timeoutId;

        if(isMounted && !shouldRender){
            setShouldRender(true);
        }else if(!isMounted && shouldRender){
            timeoutId = setTimeout(()=>setShouldRender(false), msDelay);
        }

        return ()=>clearTimeout(timeoutId);
    }, [isMounted, msDelay, shouldRender]);

    return shouldRender;
};

export default useDelayUnmount;

Spiracle

Answer 22

The below code is somewhat similar to other answers but I wanted to attempt to scale the solution

• to easily add different type of transitions e.g. fade, slide etc.
• to use the same solution irrespective of conditionally rendering or just rendering without any condition.

In the below code, only these two code items are required to implement

1. AnimatableComponent - React component which internally uses TransitionComponent.

   Note: One can also use TransitionComponent separately too to have transitions on a component which are not rendered conditionally.

2. And a set of CSS classes.

3. Rest is how to use them.

/** 
 * This is a simple component which applies your provided trasition on the component.
 * Depending upon whether you want to show or hide the component, it adds In and Out classes on the component.
 * For example, if your transition name is slide then it will add slideIn and slideOut classes to the component.
 * At the end, it also provides onTransitionEnd event property to know when the transition ends.
 */
const TransitionComponent = ({show, transition, onTransitionEnd, children}) => {
  const [transitionDirection, setTransitionDirection] = React.useState('out')
  
  React.useEffect(() => {
    const direction = show ? `${transition}In` : `${transition}Out`
    setTransitionDirection(direction)
    console.log(`${transition} ${direction}`)
  }, [show])
  
  return (
    <div className={`${transition} ${transitionDirection}`} onTransitionEnd={onTransitionEnd}>
      {children}
    </div>
  )
}

/** 
 * This can act as base/wrapper component for any custom component to animate
 * React Components does not provide you a place to execute some code before a component is unmounted.
 * For example, let's say a custom component is conditionally rendered based on a property/expression in the parent component (called as condition) and 
 * as soon as that condition evaluates to false then component is removed from the DOM.
 * What to do when you want to show animations before it is removed? This component handles exactly that.
 * This component handles conditional rendering within itself behind mount property and expects you to provide your condition in a show property
 * show property is then mapped to the internal mount state at some desired levels like
 *  - When show is true, set mount to true. Thereby, adding the component in the DOM and running the animation.
 *  - When show is false, check if transition finishes and set mount to false. Thereby, removing the component from the DOM.
 * conditionallyRender property? This component comes with another property so that you can enjoy the animations even if you do not want to conditionally render the component
 *  - When conditionallyRender is false, mount property is no more in effect and component rendered unconditionally i.e. is not conditionally rendered
 *  - When conditionallyRender is true (also default), mount property is in effect to conditionally render the component 
 */
const AnimatableComponent = ({conditionallyRender = true, show, transition = 'fade', children}) => {
  const [mount, setMount] = React.useState(show);
  
  React.useEffect(() => {
    if (conditionallyRender && show) {
      setMount(true)
      console.log('Mounted')
    }
  }, [show])
  
  const handleTransitionEnd = () => {
    if (conditionallyRender && !show) {
      setMount(false)
      console.log('Unmounted')      
    }
  }
  
  const getAnimatableChildren = () => {
    return (
      <TransitionComponent show={show} transition={transition} onTransitionEnd={handleTransitionEnd}>
        {children}
      </TransitionComponent>
    )
  }
  
  return (
    conditionallyRender
      ? ((show || mount) && getAnimatableChildren())
      : getAnimatableChildren()
  )
}

const BoxComponent = () => {
  return (
    <div className='box'>Box</div>
  )
}

const App = () => {
  const [mountedShow, setMountedShow] = React.useState(false)
  const [displayShow, setDisplayShow] = React.useState(false)  
  
  const handleMountUnmountClick = () => {
    setMountedShow(!mountedShow)
  }

  const handleShowHideClick = () => {
    setDisplayShow(!displayShow)
  }  
  
  return (
    <React.Fragment>
      <div style={{display: 'flex'}}>
        <div style={{flex: 1}}>
          <h1>Mount/Unmount Transitions</h1>
          <AnimatableComponent conditionallyRender={true} show={mountedShow} transition='slide'>
            <BoxComponent/>
          </AnimatableComponent>
          <button type="button" onClick={handleMountUnmountClick}>Mount/Unmount Box</button>
        </div>
        
        <div style={{flex: 1}}>
          <h1>Display Transitions</h1>
          <AnimatableComponent conditionallyRender={false} show={displayShow} transition='slide'>
            <BoxComponent/>
          </AnimatableComponent>
          <button type="button" onClick={handleShowHideClick}>Show/Hide Box</button>
        </div>
      </div>
    </React.Fragment>
  )
}


ReactDOM.render(<App/>, document.getElementById('app-container'))

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  background-color: #f00;
  margin: 24px;
}

.fade {
  visibility: hidden;
  opacity: 0;
  transition: opacity 550ms, visibility 350ms;
}

.fade.fadeIn {
  visibility: visible;
  opacity: 1;
}


.fade.fadeOut {
  visibility: hidden;
  opacity: 0;
}

.slide {
  visibility: hidden;
  opacity: 0;
  transform: translateX(100vw);
  transition: transform 350ms, opacity 350ms, visibility 350ms;
}


.slide.slideIn {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}


.slide.slideOut {
  visibility: hidden;
  opacity: 0;
  transform: translateX(100vw);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<div id="app-container">This is where React app will initialize</div>

Notes:

• Here is a link to a good post that was referred to write this code.
• Also referred this Code Sandbox for the condition of conditional rendering where both show and mount variables were used as in ((show || mount) && <Your Component.../>
• Earlier I used only mount as in mount && <Your Component.../>. I do not understand the reason but it seems it has something to do with the DOM reflow and how CSS Transitions needs a reflow to properly work when they are applied on a conditionally rendered element e.g. an element added using appendChild or display: none in JS or && in React JSX.
• Here is another codesandbox from one of the answer, which uses only one condition but this one used CSS Animations. CSS Animation doesn't seem to have this issue but CSS transitions do.
• In Conclusion, it seems that if you use
  • CSS Transitions, then use logical OR of both the variables as in (show || mount) && <Your Component... />.
  • CSS Animations, then just the mount as in mount && <Your Component... />.

Rectilinear

Answer 23

I found the simplest solution that works for me. You can make animation using only css.

If we use animations, they are usually looped. But you can add a property that will allow the animation to fire only 1 time.

And when mounting the component, it turns out that we will start the animation, which will work 1 time.

(I use tailwind but the principle is the same)

How it looks in component (like simple class):

...
return (
    <>
      <div
        id="scrim"
        onClick={handleClose}
        className="fixed inset-0 block flex h-full w-full items-end justify-center  overflow-y-hidden bg-gray-800/50"
      >
        <div className="mt-[56px] flex animate-sheet 👈  flex-col items-center justify-center">
          <div className=" z-10 flex w-full min-w-[220px] max-w-[640px]  flex-col overflow-y-auto  rounded-t-[16px] bg-blue-50 px-[12px] pb-[28px] scrollbar-hide dark:bg-gray-900">
...

Now change configuration of your tailwind file and add additional animation

...
animation: {
  sheet: "sheet 0.5s cubic-bezier(.9,0,.2,1) 1", 👈 here you can change "1" to "infinity" and get looped animation or vice versa
},...

And specify keyframes:

...
keyframes: {
  sheet: {
    from: {
       transform: "translateY(100%)",
      },
    to: {
       transform: "translateY(0)",
      },
},
...

The disadvantage of this method is that there is no effect when the component is unmounted. But in my case, I think that in terms of the amount of code, its simplicity and the effect achieved, this is an excellent compromise than dragging new dependencies or adding custom hooks.

Henrieta