or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

css-transition-group.mdindex.md
tile.json

index.mddocs/

React CSS Transition Group

React CSS Transition Group provides CSS transition and animation capabilities for React components entering or leaving the DOM. It offers a high-level declarative API for common CSS animations using CSS classes applied automatically during component lifecycle transitions.

Package Information

  • Package Name: react-addons-css-transition-group
  • Package Type: npm
  • Language: JavaScript (React 15.4.2)
  • Installation: npm install react-addons-css-transition-group

Core Imports

import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

For ES5 with npm:

var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

For ES5 with react-with-addons.js:

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

Basic Usage

import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {items: ['hello', 'world', 'click', 'me']};
  }

  handleAdd() {
    const newItems = this.state.items.concat(['new item']);
    this.setState({items: newItems});
  }

  handleRemove(i) {
    let newItems = this.state.items.slice();
    newItems.splice(i, 1);
    this.setState({items: newItems});
  }

  render() {
    const items = this.state.items.map((item, i) => (
      <div key={item} onClick={() => this.handleRemove(i)}>
        {item}
      </div>
    ));

    return (
      <div>
        <button onClick={() => this.handleAdd()}>Add Item</button>
        <ReactCSSTransitionGroup
          transitionName="example"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}>
          {items}
        </ReactCSSTransitionGroup>
      </div>
    );
  }
}

Architecture

React CSS Transition Group is built around several key components:

  • ReactCSSTransitionGroup: High-level component for declarative CSS transitions using class names
  • ReactCSSTransitionGroupChild: Internal wrapper that handles individual child transitions and CSS class management
  • CSS Convention System: Automatic CSS class application following naming patterns for enter/leave/appear transitions
  • Timeout Management: Ensures DOM cleanup occurs after animation completion
  • ReactTransitionGroup: Low-level base component (provided by React core) that manages component lifecycle

Capabilities

CSS Transition Group

High-level React component for easily implementing CSS transitions and animations when components enter or leave the DOM. Uses CSS classes applied at different lifecycle stages.

class ReactCSSTransitionGroup extends React.Component {
  static propTypes: {
    transitionName: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.shape({
        enter: React.PropTypes.string,
        enterActive: React.PropTypes.string,
        leave: React.PropTypes.string,
        leaveActive: React.PropTypes.string,
        appear: React.PropTypes.string,
        appearActive: React.PropTypes.string,
      }),
    ]),
    transitionAppear: React.PropTypes.bool,
    transitionEnter: React.PropTypes.bool,
    transitionLeave: React.PropTypes.bool,
    transitionAppearTimeout: React.PropTypes.number,
    transitionEnterTimeout: React.PropTypes.number,
    transitionLeaveTimeout: React.PropTypes.number,
  };
  
  static defaultProps: {
    transitionAppear: false,
    transitionEnter: true,
    transitionLeave: true,
  };
}

CSS Transition Group

Types

// Transition name formats
type TransitionName = string | {
  enter?: string;
  enterActive?: string;
  leave?: string;
  leaveActive?: string;
  appear?: string;
  appearActive?: string;
};

// Legacy transition name format (also supported)
type LegacyTransitionName = {
  enter: string;
  leave: string;
  active: string;
};