Learn React-transition-group - 10 Code Examples & CST Typing Practice Test

React Transition Group (RTG) is a lightweight animation utility for React that enables transitions when components enter, exit, or change state. It provides simple APIs such as CSSTransition, Transition, SwitchTransition, and TransitionGroup to orchestrate animations without dictating animation styles or mechanics.

View all 10 React-transition-group code examples →

Fade Toggle Slide Down Fade + Scale Horizontal Slide Fade List Items Zoom On Mount Fade + Slide Up Fade + Slide Down Fade with Delay Fade List Removal

Learn REACT-TRANSITION-GROUP with Real Code Examples

Updated Nov 26, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Fade Toggle

# react_transition_group/demo/App1.jsx
import React, { useState } from 'react'
import { CSSTransition } from 'react-transition-group'
import './styles.css'

function App() {
    const [show, setShow] = useState(false)
    return (
        <div>
        <button onClick={() => setShow(!show)}>Toggle</button>
        <CSSTransition in={show} timeout={300} classNames="fade" unmountOnExit>
        <div className="box">Hello!</div>
        </CSSTransition>
        </div>
    )
}

export default App

Fades a div in/out when toggled

Let’s Try →

Slide Down

# react_transition_group/demo/App2.jsx
import React, { useState } from 'react'
import { CSSTransition } from 'react-transition-group'
import './styles.css'

function App() {
    const [open, setOpen] = useState(false)
    return (
        <div>
        <button onClick={() => setOpen(!open)}>Toggle Slide</button>
        <CSSTransition in={open} timeout={400} classNames="slide" unmountOnExit>
        <div className="panel">Sliding Panel</div>
        </CSSTransition>
        </div>
    )
}

export default App

Slides a box down/up when toggled

Let’s Try →

Fade + Scale

# react_transition_group/demo/App3.jsx
import React, { useState } from 'react'
import { CSSTransition } from 'react-transition-group'
import './styles.css'

function App() {
    const [show, setShow] = useState(false)
    return (
        <div>
        <button onClick={() => setShow(!show)}>Toggle</button>
        <CSSTransition in={show} timeout={300} classNames="fadeScale" unmountOnExit>
        <div className="box">Hello Scale!</div>
        </CSSTransition>
        </div>
    )
}

export default App

Fades and scales a box

Let’s Try →

Horizontal Slide

# react_transition_group/demo/App4.jsx
import React, { useState } from 'react'
import { CSSTransition } from 'react-transition-group'
import './styles.css'

function App() {
    const [show, setShow] = useState(false)
    return (
        <div>
        <button onClick={() => setShow(!show)}>Toggle Slide</button>
        <CSSTransition in={show} timeout={350} classNames="slideH" unmountOnExit>
        <div className="box">Horizontal Slide</div>
        </CSSTransition>
        </div>
    )
}

export default App

Slides horizontally in/out

Let’s Try →

Fade List Items

# react_transition_group/demo/App5.jsx
import React, { useState } from 'react'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import './styles.css'

function App() {
    const [items, setItems] = useState([])
    return (
        <div>
        <button onClick={() => setItems([...items, `Item ${items.length+1}`])}>Add Item</button>
        <TransitionGroup>
        {items.map(item => (
        <CSSTransition key={item} timeout={300} classNames="fade">
        <div className="list-item">{item}</div>
        </CSSTransition>
        ))}
        </TransitionGroup>
        </div>
    )
}

export default App

Fades items in a list

Let’s Try →

Zoom On Mount

# react_transition_group/demo/App6.jsx
import React, { useState } from 'react'
import { CSSTransition } from 'react-transition-group'
import './styles.css'

function App() {
    const [show, setShow] = useState(false)
    return (
        <div>
        <button onClick={() => setShow(!show)}>Toggle Zoom</button>
        <CSSTransition in={show} timeout={300} classNames="zoom" unmountOnExit>
        <div className="box">Zoom!</div>
        </CSSTransition>
        </div>
    )
}

export default App

Zoom effect when component mounts

Let’s Try →

Fade + Slide Up

# react_transition_group/demo/App7.jsx
import React, { useState } from 'react'
import { CSSTransition } from 'react-transition-group'
import './styles.css'

function App() {
    const [show, setShow] = useState(false)
    return (
        <div>
        <button onClick={() => setShow(!show)}>Toggle Up</button>
        <CSSTransition in={show} timeout={400} classNames="fadeUp" unmountOnExit>
        <div className="box">Up Fade</div>
        </CSSTransition>
        </div>
    )
}

export default App

Fades in and slides up

Let’s Try →

Fade + Slide Down

# react_transition_group/demo/App8.jsx
import React, { useState } from 'react'
import { CSSTransition } from 'react-transition-group'
import './styles.css'

function App() {
    const [show, setShow] = useState(false)
    return (
        <div>
        <button onClick={() => setShow(!show)}>Toggle Down</button>
        <CSSTransition in={show} timeout={400} classNames="fadeDown" unmountOnExit>
        <div className="box">Down Fade</div>
        </CSSTransition>
        </div>
    )
}

export default App

Fades in and slides down

Let’s Try →

Fade with Delay

# react_transition_group/demo/App9.jsx
import React, { useState } from 'react'
import { CSSTransition } from 'react-transition-group'
import './styles.css'

function App() {
    const [show, setShow] = useState(false)
    return (
        <div>
        <button onClick={() => setShow(!show)}>Toggle Delayed</button>
        <CSSTransition in={show} timeout={500} classNames="fade" unmountOnExit>
        <div className="box">Delayed Fade</div>
        </CSSTransition>
        </div>
    )
}

export default App

Fades in a box with a delay

Let’s Try →

Fade List Removal

# react_transition_group/demo/App10.jsx
import React, { useState } from 'react'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import './styles.css'

function App() {
    const [items, setItems] = useState([1,2,3])
    return (
        <div>
        <button onClick={() => setItems(items.slice(0,-1))}>Remove Item</button>
        <TransitionGroup>
        {items.map(item => (
        <CSSTransition key={item} timeout={300} classNames="fade">
        <div className="list-item">Item {item}</div>
        </CSSTransition>
        ))}
        </TransitionGroup>
        </div>
    )
}

export default App

Fades items out when removed from list

Let’s Try →

Frequently Asked Questions about React-transition-group

What is React-transition-group?

What are the primary use cases for React-transition-group?

Page transitions. List item animations. Modal, drawer, and dropdown transitions. Button and small UI state animations. Mount/unmount controlled effects

What are the strengths of React-transition-group?

Very lightweight (~9kb). Flexible - works with CSS or JS animation libraries. Great for mount/unmount animation control. Good compatibility with existing React projects. Lifecycle hooks offer fine-grained control

What are the limitations of React-transition-group?

Not a full animation engine like Framer Motion or GSAP. No built-in physics or gestures. More manual work than dedicated animation libraries. Requires careful class naming for CSSTransition. Limited support for complex timeline-based animations

How can I practice React-transition-group typing speed?

CodeSpeedTest offers 10+ real React-transition-group code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Learn React-transition-group - 10 Code Examples & CST Typing Practice Test

Code Sample Descriptions

Fade Toggle

# react_transition_group/demo/App1.jsx
import React, { useState } from 'react'
import { CSSTransition } from 'react-transition-group'
import './styles.css'

function App() {
    const [show, setShow] = useState(false)
    return (
        <div>
        <button onClick={() => setShow(!show)}>Toggle</button>
        <CSSTransition in={show} timeout={300} classNames="fade" unmountOnExit>
        <div className="box">Hello!</div>
        </CSSTransition>
        </div>
    )
}

export default App

Fades a div in/out when toggled

Let’s Try →

Slide Down

# react_transition_group/demo/App2.jsx
import React, { useState } from 'react'
import { CSSTransition } from 'react-transition-group'
import './styles.css'

function App() {
    const [open, setOpen] = useState(false)
    return (
        <div>
        <button onClick={() => setOpen(!open)}>Toggle Slide</button>
        <CSSTransition in={open} timeout={400} classNames="slide" unmountOnExit>
        <div className="panel">Sliding Panel</div>
        </CSSTransition>
        </div>
    )
}

export default App

Slides a box down/up when toggled

Let’s Try →

Fade + Scale

# react_transition_group/demo/App3.jsx
import React, { useState } from 'react'
import { CSSTransition } from 'react-transition-group'
import './styles.css'

function App() {
    const [show, setShow] = useState(false)
    return (
        <div>
        <button onClick={() => setShow(!show)}>Toggle</button>
        <CSSTransition in={show} timeout={300} classNames="fadeScale" unmountOnExit>
        <div className="box">Hello Scale!</div>
        </CSSTransition>
        </div>
    )
}

export default App

Fades and scales a box

Let’s Try →

Horizontal Slide

# react_transition_group/demo/App4.jsx
import React, { useState } from 'react'
import { CSSTransition } from 'react-transition-group'
import './styles.css'

function App() {
    const [show, setShow] = useState(false)
    return (
        <div>
        <button onClick={() => setShow(!show)}>Toggle Slide</button>
        <CSSTransition in={show} timeout={350} classNames="slideH" unmountOnExit>
        <div className="box">Horizontal Slide</div>
        </CSSTransition>
        </div>
    )
}

export default App

Slides horizontally in/out

Let’s Try →

Fade List Items

# react_transition_group/demo/App5.jsx
import React, { useState } from 'react'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import './styles.css'

function App() {
    const [items, setItems] = useState([])
    return (
        <div>
        <button onClick={() => setItems([...items, `Item ${items.length+1}`])}>Add Item</button>
        <TransitionGroup>
        {items.map(item => (
        <CSSTransition key={item} timeout={300} classNames="fade">
        <div className="list-item">{item}</div>
        </CSSTransition>
        ))}
        </TransitionGroup>
        </div>
    )
}

export default App

Fades items in a list

Let’s Try →

Zoom On Mount

# react_transition_group/demo/App6.jsx
import React, { useState } from 'react'
import { CSSTransition } from 'react-transition-group'
import './styles.css'

function App() {
    const [show, setShow] = useState(false)
    return (
        <div>
        <button onClick={() => setShow(!show)}>Toggle Zoom</button>
        <CSSTransition in={show} timeout={300} classNames="zoom" unmountOnExit>
        <div className="box">Zoom!</div>
        </CSSTransition>
        </div>
    )
}

export default App

Zoom effect when component mounts

Let’s Try →

Fade + Slide Up

# react_transition_group/demo/App7.jsx
import React, { useState } from 'react'
import { CSSTransition } from 'react-transition-group'
import './styles.css'

function App() {
    const [show, setShow] = useState(false)
    return (
        <div>
        <button onClick={() => setShow(!show)}>Toggle Up</button>
        <CSSTransition in={show} timeout={400} classNames="fadeUp" unmountOnExit>
        <div className="box">Up Fade</div>
        </CSSTransition>
        </div>
    )
}

export default App

Fades in and slides up

Let’s Try →

Fade + Slide Down

# react_transition_group/demo/App8.jsx
import React, { useState } from 'react'
import { CSSTransition } from 'react-transition-group'
import './styles.css'

function App() {
    const [show, setShow] = useState(false)
    return (
        <div>
        <button onClick={() => setShow(!show)}>Toggle Down</button>
        <CSSTransition in={show} timeout={400} classNames="fadeDown" unmountOnExit>
        <div className="box">Down Fade</div>
        </CSSTransition>
        </div>
    )
}

export default App

Fades in and slides down

Let’s Try →

Fade with Delay

# react_transition_group/demo/App9.jsx
import React, { useState } from 'react'
import { CSSTransition } from 'react-transition-group'
import './styles.css'

function App() {
    const [show, setShow] = useState(false)
    return (
        <div>
        <button onClick={() => setShow(!show)}>Toggle Delayed</button>
        <CSSTransition in={show} timeout={500} classNames="fade" unmountOnExit>
        <div className="box">Delayed Fade</div>
        </CSSTransition>
        </div>
    )
}

export default App

Fades in a box with a delay

Let’s Try →

Fade List Removal

# react_transition_group/demo/App10.jsx
import React, { useState } from 'react'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import './styles.css'

function App() {
    const [items, setItems] = useState([1,2,3])
    return (
        <div>
        <button onClick={() => setItems(items.slice(0,-1))}>Remove Item</button>
        <TransitionGroup>
        {items.map(item => (
        <CSSTransition key={item} timeout={300} classNames="fade">
        <div className="list-item">Item {item}</div>
        </CSSTransition>
        ))}
        </TransitionGroup>
        </div>
    )
}

export default App

Fades items out when removed from list

Let’s Try →

Frequently Asked Questions about React-transition-group

What is React-transition-group?

What are the primary use cases for React-transition-group?

Page transitions. List item animations. Modal, drawer, and dropdown transitions. Button and small UI state animations. Mount/unmount controlled effects

What are the strengths of React-transition-group?

What are the limitations of React-transition-group?

How can I practice React-transition-group typing speed?

CodeSpeedTest offers 10+ real React-transition-group code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.