Fade + Slide Up - React-transition-group Typing CST Test
Loading…
Fade + Slide Up — React-transition-group Code
Fades in and slides 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 AppReact-transition-group Language Guide
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.
Primary Use Cases
- ▸Page transitions
- ▸List item animations
- ▸Modal, drawer, and dropdown transitions
- ▸Button and small UI state animations
- ▸Mount/unmount controlled effects
Notable Features
- ▸Declarative enter/exit transitions
- ▸Integration with CSS animations or JS-based animations
- ▸TransitionGroup for list animation
- ▸SwitchTransition for swapping components
- ▸Hook-like lifecycle callbacks for animations
Origin & Creator
React Transition Group was originally developed by the React community as part of React addons, later split into its own standalone package maintained by the React team and open-source contributors.
Industrial Note
RTG is widely used in UI-heavy React apps, dashboards, modals, dropdowns, list animations, route transitions, marketing pages, and any place requiring controlled mount/unmount animations.