react-tiny-transition v2.5.0

TinyTransition

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 and element.classList 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

• react-tiny-crossfade
• react-tiny-collapse

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.