CSSTransition

A Transition component using CSS transitions and animations. It's inspired by the excellent ng-animate library.

CSSTransition applies a pair of class names during the appear, enter, and exit stages of the transition. The first class is applied and then a second "active" class in order to activate the css animation. After the animation, matching done class names are applied to persist the animation state.

When the in prop is toggled to true the Component will get the example-enter CSS class and the example-enter-active CSS class added in the next tick. This is a convention based on the classNames prop.

Example

Props
Accepts all props from <Transition> unless otherwise noted.

classNames

The animation classNames applied to the component as it enters, exits or has finished the transition. A single name can be provided and it will be suffixed for each stage: e.g.

classNames="fade" applies fade-enter, fade-enter-active, fade-enter-done, fade-exit, fade-exit-active, fade-exit-done, fade-appear, and fade-appear-active. Each individual classNames can also be specified independently like:

classNames={{
 appear: 'my-appear',
 appearActive: 'my-active-appear',
 enter: 'my-enter',
 enterActive: 'my-active-enter',
 enterDone: 'my-done-enter,
 exit: 'my-exit',
 exitActive: 'my-active-exit',
 exitDone: 'my-done-exit,
}}
type: string | { appear?: string, appearActive?: string, enter?: string, enterActive?: string, enterDone?: string, exit?: string, exitActive?: string, exitDone?: string, }

onEnter

A <Transition> callback fired immediately after the 'enter' or 'appear' class is applied.

type: Function(node: HtmlElement, isAppearing: bool)

onEntering

A <Transition> callback fired immediately after the 'enter-active' or 'appear-active' class is applied.

type: Function(node: HtmlElement, isAppearing: bool)

onEntered

A <Transition> callback fired immediately after the 'enter' or 'appear' classes are removed and the done class is added to the DOM node.

type: Function(node: HtmlElement, isAppearing: bool)

onExit

A <Transition> callback fired immediately after the 'exit' class is applied.

type: Function(node: HtmlElement)

onExiting

A <Transition> callback fired immediately after the 'exit-active' is applied.

type: Function(node: HtmlElement

onExited

A <Transition> callback fired immediately after the 'exit' classes are removed and the exit-done class is added to the DOM node.

type: Function(node: HtmlElement)