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:
ReactCSSTransitionGroup - I'm not using CSS classes at all, it's all JS styles, so this won't work.
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:
GreenSock - The licensing is too restrictive for business use IMO.
React Motion - This seems great, but TransitionMotion is extremely confusing and overly complicated for what I need.
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.
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>
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.
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:)
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>
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>
)
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);
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.
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
Animating enter and exit transitions is much easier with react-move.
example on codesandbox
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);
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);
}
}
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>
);
}
}
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;
}
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>.
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()
})
}
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
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.
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>
)}
</>
);
}
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.
Install dependecies
npm install react-transition-group
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>
)
}
Simply use it like this:
import { MountAnimation } from '../../path/to/component'
...
const [isElementVisible, setIsElementVisible] = useState(false)
return (
<MountAnimation isVisible={isElementVisible}>
// your content here
</MountAnimation>
)
(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
rewrote of https://stackoverflow.com/a/54114180/8552163
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;
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
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.
And a set of CSS classes.
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... />.
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.