tessl/npm-react-transition-group

A react component toolset for managing animations

—

Pending

Overview

Eval results

Files

CSS Transitions

Name: tessl/npm-react-transition-group
Author: tessl

The CSSTransition component applies CSS classes during transition phases, making it easy to create CSS-based animations. It builds upon the base Transition component and automatically manages class name application.

Capabilities

CSSTransition Component

Applies CSS classes during appear, enter, and exit states of transitions with automatic class management.

/**
 * CSS class-based transition component that applies classes for animation states
 * @param props - CSSTransition props extending Transition props
 * @returns JSX element with CSS class management
 */
function CSSTransition({
  classNames,
  onEnter,
  onEntering,
  onEntered,
  onExit,
  onExiting,
  onExited,
  ...transitionProps
}): JSX.Element;

interface CSSTransitionProps extends TransitionProps {
  /** 
   * CSS class names for different transition states
   * Can be a string prefix or object with specific class names
   */
  classNames: string | {
    appear?: string;
    appearActive?: string;
    appearDone?: string;
    enter?: string;
    enterActive?: string;
    enterDone?: string;
    exit?: string;
    exitActive?: string;
    exitDone?: string;
  };
  /** Enhanced callbacks that work with CSS class application (node is undefined when nodeRef is used) */
  onEnter?: (node?: HTMLElement, isAppearing?: boolean) => void;
  onEntering?: (node?: HTMLElement, isAppearing?: boolean) => void;
  onEntered?: (node?: HTMLElement, isAppearing?: boolean) => void;
  onExit?: (node?: HTMLElement) => void;
  onExiting?: (node?: HTMLElement) => void;
  onExited?: (node?: HTMLElement) => void;
}

Usage Examples:

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import './fade.css'; // CSS file with transition styles

function App() {
  const [inProp, setInProp] = useState(false);
  
  return (
    <div>
      <CSSTransition in={inProp} timeout={200} classNames="fade">
        <div>
          {"I'll receive fade-* classes"}
        </div>
      </CSSTransition>
      <button onClick={() => setInProp(!inProp)}>
        Toggle
      </button>
    </div>
  );
}

// Object-based class names
function CustomClassNames() {
  const [show, setShow] = useState(false);
  
  return (
    <CSSTransition
      in={show}
      timeout={300}
      classNames={{
        enter: 'my-enter',
        enterActive: 'my-enter-active',
        exit: 'my-exit',
        exitActive: 'my-exit-active',
      }}
    >
      <div>Content with custom classes</div>
    </CSSTransition>
  );
}

CSS Class Application Pattern

When using string-based classNames, CSS classes are applied in the following pattern:

Enter Sequence:

fade-enter is applied
fade-enter-active is added on next frame
Both classes removed, fade-enter-done added when complete

Exit Sequence:

fade-exit is applied
fade-exit-active is added on next frame
Both classes removed, fade-exit-done added when complete

Appear Sequence (if appear={true}):

fade-appear is applied
fade-appear-active is added on next frame
Both classes removed, fade-appear-done and fade-enter-done added when complete

Example CSS Styles

/* Fade transition example */
.fade-enter {
  opacity: 0;
}

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

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}

/* Slide transition example */
.slide-enter {
  transform: translateX(-100%);
}

.slide-enter-active {
  transform: translateX(0);
  transition: transform 300ms ease-out;
}

.slide-exit {
  transform: translateX(0);
}

.slide-exit-active {
  transform: translateX(100%);
  transition: transform 300ms ease-in;
}

Object-Based Class Names

For more control, provide an object with specific class names:

const classNames = {
  appear: 'my-appear',
  appearActive: 'my-active-appear',
  appearDone: 'my-done-appear',
  enter: 'my-enter',
  enterActive: 'my-active-enter',
  enterDone: 'my-done-enter',
  exit: 'my-exit',
  exitActive: 'my-active-exit',
  exitDone: 'my-done-exit',
};

function MyComponent({ show }) {
  return (
    <CSSTransition
      in={show}
      timeout={200}
      classNames={classNames}
    >
      <div>Animated content</div>
    </CSSTransition>
  );
}

CSS Modules Integration

Use with CSS Modules by spreading the imported styles:

import styles from './styles.module.css';

function ModularComponent({ show }) {
  return (
    <CSSTransition
      in={show}
      timeout={200}
      classNames={{ ...styles }}
    >
      <div>Content with CSS Modules</div>
    </CSSTransition>
  );
}

Advanced CSS Integration

The CSSTransition component forces a reflow between applying base and active classes to ensure proper CSS transitions:

// This timing is handled automatically:
// 1. Apply 'fade-enter' class
// 2. Force reflow (node.scrollTop)
// 3. Apply 'fade-enter-active' class
// 4. CSS transition plays between these states

This reflow mechanism is crucial for animating appearance when elements are mounted, as it ensures the browser recognizes the initial state before transitioning to the final state.

Install with Tessl CLI

npx tessl i tessl/npm-react-transition-group

docs

css-transition.md

index.md

replace-transition.md