or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

css-transition.md index.md switch-transition.md transition-group.md transition.md

tile.json

CSS Transition Component

CSSTransition extends Transition with automatic CSS class management. It applies CSS classes at different stages of the transition, making it easy to create smooth CSS-based animations.

Capabilities

CSSTransition Component Class

CSS-based transition component with automatic class name management.

/**
 * Extends Transition with CSS class management for smooth CSS-based animations.
 * Automatically applies classes during transition phases.
 */
declare class CSSTransition<Ref extends undefined | HTMLElement> extends Component<CSSTransitionProps<Ref>> {}

CSSTransition Props

Extends all Transition props with CSS class configuration.

type CSSTransitionProps<Ref extends undefined | HTMLElement = undefined> = TransitionProps<Ref> & {
  /** 
   * The animation classNames applied to the component as it enters or exits.
   * Can be a single string or object with individual class names.
   */
  classNames?: string | CSSTransitionClassNames;
};

CSS Class Names Configuration

Detailed control over CSS classes applied during each transition phase.

interface CSSTransitionClassNames {
  /** Class applied during the appear phase */
  appear?: string;
  
  /** Class applied while appearing (active state) */
  appearActive?: string;
  
  /** Class applied when appear is complete */
  appearDone?: string;
  
  /** Class applied during the enter phase */
  enter?: string;
  
  /** Class applied while entering (active state) */
  enterActive?: string;
  
  /** Class applied when enter is complete */
  enterDone?: string;
  
  /** Class applied during the exit phase */
  exit?: string;
  
  /** Class applied while exiting (active state) */
  exitActive?: string;
  
  /** Class applied when exit is complete */
  exitDone?: string;
}

Class Name Patterns

String Class Names

When using a string, classes are automatically suffixed:

classNames="fade" applies:
- fade-appear, fade-appear-active, fade-appear-done
- fade-enter, fade-enter-active, fade-enter-done
- fade-exit, fade-exit-active, fade-exit-done

Object Class Names

Individual control over each class:

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

Usage Examples:

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

// Basic fade transition
const FadeExample: React.FC = () => {
  const [show, setShow] = useState(false);

  return (
    <>
      <button onClick={() => setShow(!show)}>Toggle</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="fade"
        unmountOnExit
      >
        <div>This content will fade in and out</div>
      </CSSTransition>
    </>
  );
};

// Custom class names
const SlideExample: React.FC = () => {
  const [show, setShow] = useState(false);

  return (
    <>
      <button onClick={() => setShow(!show)}>Toggle</button>
      <CSSTransition
        in={show}
        timeout={500}
        classNames={{
          enter: 'slide-enter',
          enterActive: 'slide-enter-active',
          exit: 'slide-exit',
          exitActive: 'slide-exit-active'
        }}
        unmountOnExit
      >
        <div className="slide-container">Sliding content</div>
      </CSSTransition>
    </>
  );
};

// With nodeRef for React 18+ StrictMode compatibility
const SafeCSSTransition: React.FC = () => {
  const [show, setShow] = useState(false);
  const nodeRef = useRef<HTMLDivElement>(null);

  return (
    <>
      <button onClick={() => setShow(!show)}>Toggle</button>
      <CSSTransition
        nodeRef={nodeRef}
        in={show}
        timeout={300}
        classNames="fade"
        unmountOnExit
      >
        <div ref={nodeRef}>Content with nodeRef</div>
      </CSSTransition>
    </>
  );
};

Corresponding CSS Example:

/* fade.css */
.fade-enter {
  opacity: 0;
}

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

.fade-exit {
  opacity: 1;
}

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