Learn REACT-TRANSITION-GROUP with Real Code Examples

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 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