asbjornh / react-tiny-transition

Kind of like CSSTransitionGroup except without the "group" and very small.

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.

react-tiny-transition's Issues

Uncaught DOMException: Failed to execute 'remove' on 'DOMTokenList'

Uncaught DOMException: Failed to execute 'remove' on 'DOMTokenList': The token provided ('reverse before-enter') contains HTML space characters, which are not valid in tokens.

Looks to be erroring here when the transitioning node has multiple classes.

Unify prop names across react-tiny-libraries

react-tiny-transition: classNames
react-tiny-crossfade: transitionClassNames