How to customize transitions?

[proshutdev]

Sorry but it's not issue , I have a question about transitions. I'm using your code but I'm confused about transitions.If I want to use Fade transitions How should I use it !? :(

[fntn]

I've been able to add fade transitions by utilising animate.css as described in the docs although you need to install and import animate.css yourself.

Install via npm:

$ npm install animate.css --save

Import into same component you imported react-step-wizard:

import 'animate.css';

Use custom transitions for fade:

let custom = {
  enterRight: 'animated fadeIn',
  enterLeft : 'animated fadeIn',
  exitRight : 'animated fadeOut',
  exitLeft  : 'animated fadeOut'
}
<StepWizard transitions={custom}>...</StepWizard>

---

Other fade animations include: fadeIn, fadeInDown, fadeInDownBig, fadeInLeft, fadeInLeftBig, fadeInRight, fadeInRightBig, fadeInUp, fadeInUpBig, fadeOut, fadeOutDown, fadeOutDownBig, fadeOutLeft, fadeOutLeftBig, fadeOutRight, fadeOutRightBig, fadeOutUp, fadeOutUpBig.

[BFMarks]

Doesn't say in the docs to import the library lol I guess that's obvious in hindsight...