vdux-transition

Transition component, analogous to React's ReactTransitionGroup

Usage no npm install needed!

<script type="module">
  import vduxTransition from 'https://cdn.skypack.dev/vdux-transition';
</script>

README

transition

js-standard-style

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:

function Tooltip () {
  return (
    <Transition>
      <InnerTooltip>{props.message}</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 entering
  • leaving - Whether or not the child is currently leaving
  • didEnter - Call this when your enter animation finishes
  • didLeave - Call this when your leave animation finishes

See also

  • CSSTransition - A higher-level transition component for animating classes, a la ReactCSSTransitionGroup/ngAnimate.

License

MIT