or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

css-transition-group.md index.md

tile.json

CSS Transition Group

High-level React component for easily implementing CSS transitions and animations when components enter or leave the DOM. Built on top of ReactTransitionGroup, it automatically applies CSS classes at different stages of the component lifecycle.

Capabilities

ReactCSSTransitionGroup Component

A React component that wraps children and applies CSS classes during enter/leave/appear transitions.

/**
 * High-level API for CSS transitions and animations when React components
 * enter or leave the DOM
 */
class ReactCSSTransitionGroup extends React.Component {
  static displayName: 'ReactCSSTransitionGroup';
  
  static propTypes: {
    /** CSS class name(s) for transitions - string or object format */
    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,
      }),
    ]).isRequired,
    
    /** Enable appear transition for initial mount */
    transitionAppear: React.PropTypes.bool,
    
    /** Enable enter transition for new elements */
    transitionEnter: React.PropTypes.bool,
    
    /** Enable leave transition for removed elements */
    transitionLeave: React.PropTypes.bool,
    
    /** Timeout duration for appear transition (milliseconds) */
    transitionAppearTimeout: React.PropTypes.number,
    
    /** Timeout duration for enter transition (milliseconds) */
    transitionEnterTimeout: React.PropTypes.number,
    
    /** Timeout duration for leave transition (milliseconds) */
    transitionLeaveTimeout: React.PropTypes.number,
  };
  
  static defaultProps: {
    transitionAppear: false,
    transitionEnter: true,
    transitionLeave: true,
  };
}

Usage Examples:

Basic string-based transition names:

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

<ReactCSSTransitionGroup
  transitionName="fade"
  transitionEnterTimeout={500}
  transitionLeaveTimeout={300}>
  {items}
</ReactCSSTransitionGroup>

With corresponding CSS:

.fade-enter {
  opacity: 0.01;
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.fade-leave {
  opacity: 1;
}

.fade-leave.fade-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

Custom Class Names

Use object format for complete control over CSS class names:

/**
 * Object format for custom CSS class names
 */
interface CustomTransitionNames {
  /** Class applied when element starts entering */
  enter?: string;
  /** Class applied after enter class, triggers transition */
  enterActive?: string;
  /** Class applied when element starts leaving */
  leave?: string;
  /** Class applied after leave class, triggers transition */
  leaveActive?: string;
  /** Class applied when element initially appears */
  appear?: string;
  /** Class applied after appear class, triggers transition */
  appearActive?: string;
}

Usage Example:

<ReactCSSTransitionGroup
  transitionName={{
    enter: 'enter',
    enterActive: 'enterActive',
    leave: 'leave',
    leaveActive: 'leaveActive',
    appear: 'appear',
    appearActive: 'appearActive'
  }}
  transitionEnter={true}
  transitionLeave={true}
  transitionAppear={true}
  transitionEnterTimeout={500}
  transitionLeaveTimeout={300}
  transitionAppearTimeout={500}>
  {items}
</ReactCSSTransitionGroup>

Appear Transitions

Enable transitions for components that are initially mounted:

<ReactCSSTransitionGroup
  transitionName="example"
  transitionAppear={true}
  transitionAppearTimeout={500}
  transitionEnter={false}
  transitionLeave={false}>
  <h1>Fading at Initial Mount</h1>
</ReactCSSTransitionGroup>

During initial mount, the component gets example-appear and example-appear-active classes.

Disabling Transitions

Selectively disable enter or leave animations:

<ReactCSSTransitionGroup
  transitionName="slide"
  transitionEnter={true}
  transitionLeave={false}
  transitionEnterTimeout={300}>
  {items}
</ReactCSSTransitionGroup>

Single Item Transitions

Animate single elements entering/leaving or being replaced:

function ImageCarousel(props) {
  return (
    <ReactCSSTransitionGroup
      transitionName="carousel"
      transitionEnterTimeout={300}
      transitionLeaveTimeout={300}>
      <img src={props.imageSrc} key={props.imageSrc} />
    </ReactCSSTransitionGroup>
  );
}

CSS Class Lifecycle

String-based Names

When transitionName="example":

Enter: example-enter → example-enter-active
Leave: example-leave → example-leave-active
Appear: example-appear → example-appear-active

Object-based Names

When using object format, exactly the specified class names are applied at each stage.

Important Notes

All children must have a unique key prop for React to track transitions
Animation durations must be specified in both CSS and timeout props
The component must be mounted before transitions can occur (unless using transitionAppear)
Timeouts are required when transitions are enabled to prevent DOM nodes from being stuck

ReactCSSTransitionGroupChild Component

Internal component that handles individual child transitions and CSS class management. This component is typically not used directly, but is automatically created by ReactCSSTransitionGroup.

// Not typically imported directly, but available if needed
import ReactCSSTransitionGroupChild from 'react-addons-css-transition-group/lib/ReactCSSTransitionGroupChild';

/**
 * Internal component that wraps individual children and manages their transition states
 */
var ReactCSSTransitionGroupChild = React.createClass({
  displayName: 'ReactCSSTransitionGroupChild',
  
  propTypes: {
    /** CSS class name(s) for transitions */
    name: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.shape({
        enter: React.PropTypes.string,
        leave: React.PropTypes.string,
        active: 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,
      }),
    ]).isRequired,
    
    /** Enable appear transition */
    appear: React.PropTypes.bool,
    /** Enable enter transition */
    enter: React.PropTypes.bool,
    /** Enable leave transition */
    leave: React.PropTypes.bool,
    /** Timeout for appear transition */
    appearTimeout: React.PropTypes.number,
    /** Timeout for enter transition */
    enterTimeout: React.PropTypes.number,
    /** Timeout for leave transition */
    leaveTimeout: React.PropTypes.number,
  },
  
  /** Handles transition logic for appear/enter/leave animations */
  transition: function(animationType, finishCallback, userSpecifiedDelay),
  
  /** Lifecycle method called when component will appear */
  componentWillAppear: function(done),
  /** Lifecycle method called when component will enter */
  componentWillEnter: function(done),
  /** Lifecycle method called when component will leave */
  componentWillLeave: function(done),
});

Internal Methods:

transition(animationType, finishCallback, userSpecifiedDelay): Core transition logic that applies CSS classes and manages timeouts
queueClassAndNode(className, node): Queues CSS class applications to avoid timing issues
flushClassNameAndNodeQueue(): Applies queued CSS classes

Lifecycle Hooks:

componentWillAppear(done): Called when component first mounts with appear enabled
componentWillEnter(done): Called when component enters the DOM
componentWillLeave(done): Called when component leaves the DOM

Error Handling

The component validates that timeout props are provided when corresponding transitions are enabled:

// Shows error if transitionEnter={true} but transitionEnterTimeout is missing
<ReactCSSTransitionGroup
  transitionName="fade"
  transitionEnter={true}
  // transitionEnterTimeout missing - will show warning
>
  {items}
</ReactCSSTransitionGroup>

Validation Rules:

Timeout Required: When transitionEnter, transitionLeave, or transitionAppear is true, the corresponding timeout prop must be provided
Timeout Type: Timeout values must be numbers (in milliseconds)
Zero Timeouts: Zero (0) is a valid timeout value and will not show warnings
Missing Timeouts: Will show console error with reference to React documentation

Error Messages:

"transitionEnterTimeout wasn't supplied to ReactCSSTransitionGroup: this can cause unreliable animations and won't be supported in a future version of React"
"transitionEnterTimeout must be a number (in milliseconds)"

Similar validation occurs for transitionLeaveTimeout and transitionAppearTimeout.

Version

Tile

Files