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:
- ENTERING
- ENTERED
- EXITING
- EXITED
By default, the Transition component does not alter it's children; it only tracks "enter" and "exit" transitions.
Transition Example
Transition API
interface ITransitionAttrs /** Displays the content; triggers onEnter/onExit callbacks */ isVisible?: boolean; /** Content to be transitioned */ content?: mChildren | mChildren; /** Invoked on initial component enter */ onEnter?: void; /** Invoked when component is entering */ onEntering?: void; /** Invoked when component has entered */ onEntered?: void; /** Invoked on initial component exit */ onExit?: void; /** Invoked when component is exiting */ onExiting?: void; /** Invoked on when component has exited */ onExited?: 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.
- onEnter:
.fade-enterclass is added tocontent - onEntering:
.fade-enter-activeclass is added tocontent - onEntered:
.fade-enterand.fade-enter-activeare removed fromcontent - onExit:
.fade-exitclass is added tocontent - onExiting:
.fade-exit-activeclass is added tocontent - onExited:
.fade-exitand.fade-exit-activeare removed fromcontent
CSSTransition Example
CSSTransition API
interface ICSSTransitionAttrs /** Displays the content; triggers onEnter/onExit callbacks */ isVisible?: boolean; /** Content to be transitioned */ content?: mChildren | mChildren; /** Invoked on initial component enter */ onEnter?: void; /** Invoked when component is entering */ onEntering?: void; /** Invoked when component has entered */ onEntered?: void; /** Invoked on initial component exit */ onExit?: void; /** Invoked when component is exiting */ onExiting?: void; /** Invoked on when component has exited */ onExited?: void; /** Timeouts for enter/exit transition */ timeout: number | enter: number; exit: number; ; /** CSS class base to use for enter/exit transitions */ transitionClass: string;