Nonviolent Pigeon Manifestation
    Wondering what’s next for npm?Check out our public roadmap! »

    react-tiny-transition

    2.4.0 • Public • Published

    TinyTransition

    npm version

    This component adds classnames to your component when it mounts/unmounts so that you can add css transitions to it. basically the same thing as CSSTransition from react-transition-group, except smaller and without dependencies.

    This component does not include any transition effects; you need to add your own. See example css below.

    Browser support:

    TinyTransition needs requestAnimationFrame (compatibility table) and element.classList (compatibility table) in order to do its thing, so make sure to add polyfills if you need to support older browsers (like IE9 and below).

    Other Tiny libraries

    Install:

    npm install react-tiny-transition
    

    API:

    duration : Number = 500
    The duration of your css transition (milliseconds)


    disableInitialAnimation : Boolean = false
    Disable the animation when TinyTransition mounts


    delay : Number = 0
    Delay before adding classnames (milliseconds)


    children : React element
    Single React element


    classNames: Object
    Default:

    {
    	beforeEnter: "before-enter",
    	entering: "entering",
    	beforeLeave: "before-leave",
    	leaving: "leaving"
    }

    Classnames to use when mounting / unmounting


    Basic example:

    import TinyTransition from "react-tiny-transition";
    
    ...
    
    <TinyTransition duration={500}>
      {this.state.isVisible &&
        <MyComponent />
      }
    </TinyTransition>

    CSS example:

    .before-enter {
      opacity: 0;
    }
    
    .entering {
      transition: opacity 0.5s;
      opacity: 1;
    }
    
    .before-leave {
      transition: opacity 0.5s;
    }
    
    .leaving {
      opacity: 0;
    }

    Multiple elements:

    In order to keep TinyTransition as tiny as possible, one child only will get classnames applied. If you want transitions on lists of things, you could try react-flip-move or react-flip-motion.

    Install

    npm i react-tiny-transition

    DownloadsWeekly Downloads

    1,357

    Version

    2.4.0

    License

    MIT

    Unpacked Size

    15.9 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar