Neurotic and Probably Misinformed

    vdux-css-transition

    1.2.1 • Public • Published

    css-transition

    js-standard-style

    CSSTransition component for adding classes to an element while it is transitioning

    Installation

    $ npm install vdux-css-transition
    

    Usage

    Use this component to apply classes to your nodes when they are being added/removed from the DOM. It works like this:

    function render () {
      return (
        <CSSTransition timeout={500}>
          <Tooltip />
        </CSSTransition>
      )
    }

    Each child of <CSSTransition/> will have the following classes added to it:

    • enter - Immediately on creation
    • enter-active - On the next tick after the enter class is added
    • leave - When the component begins leaving
    • leave-active - On th enext tick after the leave class is added

    API - props

    • timeout - (Object|Number). If you specify a number, it'll be used as both the enter and leave timeout lengths in milliseconds. You may alternatively passn an object with enter and leave keys to specify them independently.

    Fade example (using jss-simple for css)

    import css from 'jss-simple'
     
    function render () {
      return (
        <CSSTransition timeout={150}>
          <div class={fade}>I'm fading in</div>
        </CSSTransition>
      )
    }
     
    const {fade} = css({
      fade: {
        '&.enter': {
          opacity: 0,
          '&.enter-active': {
            transition: 'opacity .15s linear',
            opacity: 1
          },
        },
        '&.leave': {
          opacity: 1,
          '&.leave-active': {
            opacity: 0,
            transition: 'opacity .15s linear'
          }
        }
      }
    })

    License

    MIT

    Keywords

    none

    Install

    npm i vdux-css-transition

    DownloadsWeekly Downloads

    3

    Version

    1.2.1

    License

    MIT

    Last publish

    Collaborators

    • ashaffer88