Skip to content

Latest commit

 

History

History
115 lines (81 loc) · 3.31 KB

README.md

File metadata and controls

115 lines (81 loc) · 3.31 KB

mithril-transition-group

A set of Mithril components for creating state/class based transitions. Inspired by react-transition-group.

Installation

npm install --save mithril-transition-group

Transition

Transition is a component that allows you to transition children based on current animation state.

There are 4 main states a Transition can be in:

  1. ENTERING
  2. ENTERED
  3. EXITING
  4. EXITED

By default, the Transition component does not alter it's children; it only tracks "enter" and "exit" transitions.

Transition Example

Transition Example

Transition API

interface ITransitionAttrs {
  /** Displays the content; triggers onEnter/onExit callbacks */
  isVisible?: boolean;

  /** Content to be transitioned */
  content?: m.Children | ((state: TransitionState) => m.Children);

  /** Invoked on initial component enter */
  onEnter?: (node: HTMLElement) => void;

  /** Invoked when component is entering */
  onEntering?: (node: HTMLElement) => void;

  /** Invoked when component has entered */
  onEntered?: (node: HTMLElement) => void;

  /** Invoked on initial component exit */
  onExit?: (node: HTMLElement) => void;

  /** Invoked when component is exiting */
  onExiting?: (node: HTMLElement) => void;

  /** Invoked on when component has exited */
  onExited?: (node: HTMLElement) => void;

  /** Timeouts for enter/exit transition */
  timeout: number | {
    enter: number;
    exit: number;
  };
}

CSS Transition

A component that uses CSS classes for transitions. It is inspired by ng-animate.

CSSTransition applies a pair of classes (specified by the transitionClass property) to content during the enter and exit transition states. Assuming transitionClass="fade", the lifecycle process is as follows.

  1. onEnter: .fade-enter class is added to content
  2. onEntering: .fade-enter-active class is added to content
  3. onEntered: .fade-enter and .fade-enter-active are removed from content
  4. onExit: .fade-exit class is added to content
  5. onExiting: .fade-exit-active class is added to content
  6. onExited: .fade-exit and .fade-exit-active are removed from content

CSSTransition Example

CSSTransition Dialog Example

CSSTransition API

interface ICSSTransitionAttrs {
  /** Displays the content; triggers onEnter/onExit callbacks */
  isVisible?: boolean;

  /** Content to be transitioned */
  content?: m.Children | ((state: TransitionState) => m.Children);

  /** Invoked on initial component enter */
  onEnter?: (node: HTMLElement) => void;

  /** Invoked when component is entering */
  onEntering?: (node: HTMLElement) => void;

  /** Invoked when component has entered */
  onEntered?: (node: HTMLElement) => void;

  /** Invoked on initial component exit */
  onExit?: (node: HTMLElement) => void;

  /** Invoked when component is exiting */
  onExiting?: (node: HTMLElement) => void;

  /** Invoked on when component has exited */
  onExited?: (node: HTMLElement) => void;

  /** Timeouts for enter/exit transition */
  timeout: number | {
    enter: number;
    exit: number;
  };

  /** CSS class base to use for enter/exit transitions */
  transitionClass: string;
}