CSSTransition

Apply a CSS class for each stage of a CSS transition.

This is basically a react-free rip-off of react-transition-group.

It is super useful to make CSS transitions from display: none; to display: whatever;.

Demo

There is a simple usage demo which can be run as follows:

yarn
yarn start

The basic idea of this library is that in order to control a CSS transition using JavaScript, you have to think of it as a three-staged process:

Start:
- Set prerequisites for the animation, e.g. set display: block; and transition: all 0.3s ease;
Active:
- One requestAnimationFrame after start
- Change transitioning properties, e.g. set opacity: 1;
Done:
- After transitionend or a timeout
- Make transition changes permanent, this means usually setting the same properties as during active stage
- During exit, this would be the place to set display back to none.

For a code example, please take a look at the demo.

Apply pointer-events: none; during .exit and .exit-active to prevent user interaction during transition
How to cope with the timeout warning:
1. Make sure that a transition is happening on the element specified during instantiation, e.g. it is not a parent element but the direct element on which the transitions are happening. If not, create separate CSSTransition instances for each element.
2. Make sure that there is actually a transition. The instance is waiting for the first transitionend event.
3. Check whether your transition takes less time than the configured timeout which is by default 500ms. If not, increase the timeout.

Certain steps need to be done in order to create a new release: