Learn REACT-TRANSITION-GROUP with Real Code Examples
Updated Nov 26, 2025
Code Sample Descriptions
1
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
2
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
3
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
4
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
5
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
6
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
7
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
8
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
9
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
10
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