transition
Transition component, analogous to React's ReactTransitionGroup, but in a more declarative style.
Installation
$ npm install vdux-transition
Usage
<Transition />
injects a special $transition
prop into all of its children. That prop has entering
, leaving
, didEnter
, and didLeave
. Example:
{ return <Transition> <InnerTooltip>propsmessage</InnerTooltip> </Transition> } const InnerTooltip render props const $transition = props const didEnter didLeave entering leaving = $transition return <div class=fade_in: entering fade_out: leaving onAnimationEnd=entering && didEnter leaving && didLeave> children </div> }}
$transition
prop
entering
- Whether or not the child is currently enteringleaving
- Whether or not the child is currently leavingdidEnter
- Call this when your enter animation finishesdidLeave
- Call this when your leave animation finishes
See also
- CSSTransition - A higher-level transition component for animating classes, a la ReactCSSTransitionGroup/ngAnimate.
License
MIT