How to use react-transition-group for animations
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
React Transition Group provides powerful components for managing component lifecycle during animations and transitions. As the creator of CoreUI with over 25 years of development experience, I rely on this library for complex animation sequences. The most effective approach is using CSSTransition component which automatically applies CSS classes at different animation phases. This ensures smooth enter/exit animations with proper timing and cleanup.
Use CSSTransition from react-transition-group to manage animation states automatically with CSS classes.
import { useState } from 'react'
import { CSSTransition } from 'react-transition-group'
import './fade.css'
function FadeExample() {
const [show, setShow] = useState(false)
return (
<div>
<button onClick={() => setShow(!show)}>
Toggle
</button>
<CSSTransition
in={show}
timeout={300}
classNames="fade"
unmountOnExit
>
<div className="content">
This content fades in and out
</div>
</CSSTransition>
</div>
)
}
The CSSTransition component automatically applies classes like fade-enter, fade-enter-active, fade-exit, and fade-exit-active based on the animation phase. The in prop controls when to start the transition, timeout sets the duration, and classNames defines the CSS class prefix. The unmountOnExit prop removes the element from DOM when hidden.
Best Practice Note:
This is the same pattern we use in CoreUI modal and alert components for reliable, accessible animations. Always include fallback styles for reduced-motion preferences using CSS media queries.
