React transition

Installation

npm i --save mcfinley-simple-react-transition

Usage

  import Transition from 'mcfinley-simple-react-transition';

  /* */
  const isVisible = /* The main thing: is this component visible or not */;

  return (
    <Transition visible={isVisible} cssName="test-animation" afterEnter={200}>
      /* Your stuff */
    </Transition>
  );

  .test-animation {
    &-after-enter {
      & { opacity: 0.0 }
      &-active { opacity: 1.0; transition: opacity 200ms ease; }
    }
  }

Transitions

You can use after-enter and before-enter transitions like:

  <Transition afterEnter={200} beforeEnter={200}>...</Transition>

It will make a 200ms pause before mounting component and 200ms pause after (means nothing).

You can add css transitions to this pauses using cssName property.

  <Transition cssName="test" afterEnter={200} beforeEnter={200}>...</Transition>

It will apply .test-before-enter and .test-before-enter-active classes in beforeEnter pause, and .test-after-enter and .test-after-enter-active classes in afterEnter.

Css animations wont work in beforeEnter and afterLeave pauses.

Notes

Transition inserts a warp node for the content

  <Transition>
    Test
  </Transition>
  <!-- Got transformed to -->
  <div>
    Test
  </div>

You can replace the div tag and the className with component and className props.

  <Transition component="span" className="my-class">Test</Transition>
  <!-- -> -->
  <span class="my-class">Test</span>