Naboo's Podracing Misadventure

    vdux-transition

    1.1.1 • Public • Published

    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

    Keywords

    none

    Install

    npm i vdux-transition

    DownloadsWeekly Downloads

    0

    Version

    1.1.1

    License

    MIT

    Last publish

    Collaborators

    • ashaffer88