@types/react-transition-group

Transition

The Transition component lets you describe a transition from one component state to another over time with a simple declarative API. The example shows a fade effect applied to a component.

{"import React from 'react';\nimport { Transition } from 'react-transition-group';\n\nconst duration = 300;\n\nconst defaultStyle = {\n  transition: `opacity ${duration}ms ease-in-out`,\n  opacity: 0,\n};\n\nconst transitionStyles = {\n  entering: { opacity: 1 },\n  entered:  { opacity: 1 },\n  exiting:  { opacity: 0 },\n  exited:  { opacity: 0 },\n};\n\nconst Fade = ({ in: inProp }) => (\n  <Transition in={inProp} timeout={duration}>\n    {state => (\n      <div style={{\n        ...defaultStyle,\n        ...transitionStyles[state]\n      }}>\n        I'm a fade Transition!\n      </div>\n    )}\n  </Transition>\n);"}

CSSTransition

CSSTransition applies a pair of class names during the appear, enter, and exit states of the transition. The example demonstrates how to use it for a fade effect.

{"import React from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nconst Fade = ({ in: inProp }) => (\n  <CSSTransition\n    in={inProp}\n    timeout={300}\n    classNames='fade'\n  >\n    <div className='fade'>I'm a fade CSSTransition!</div>\n  </CSSTransition>\n);\n\n// CSS\n.fade-enter {\n  opacity: 0.01;\n}\n.fade-enter-active {\n  opacity: 1;\n  transition: opacity 300ms ease-in;\n}\n.fade-exit {\n  opacity: 1;\n}\n.fade-exit-active {\n  opacity: 0.01;\n  transition: opacity 300ms ease-in;\n}"}

TransitionGroup

TransitionGroup manages a set of transition components (like CSSTransition) in a list. It's useful for animating lists or groups of elements entering and exiting. The example shows a todo list where items fade in and out.

{"import React from 'react';\nimport { TransitionGroup, CSSTransition } from 'react-transition-group';\n\nfunction TodoList({ todos }) {\n  return (\n    <TransitionGroup className='todo-list'>\n      {todos.map(({ id, text }) => (\n        <CSSTransition\n          key={id}\n          timeout={500}\n          classNames='item'\n        >\n          <div>{text}</div>\n        </CSSTransition>\n      ))}\n    </TransitionGroup>\n  );\n}"}