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 (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

• 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.