В официальной документации FadeTransition - это обычная CSSTranstion, упакованная в компонент react:
const FadeTransition = props => (
<CSSTransition
{...props}
classNames='fade'
timeout={350}
appear
addEndListener={(node, done) => {
node.addEventListener('transitionend', done, false);
}}
/>
);
Таким образом, чтобы использовать SwitchTranstion, например с react-router-dom:
const App = props => {
return (
<Fragment>
<Navbar />
<div className='container'>
<SwitchTransition mode='out-in'>
<FadeTransition key={props.history.location.pathname}>
<Switch>
<Route exact path='/' component={Home} />
<Route exact path='/about' component={About} />
</Switch>
</FadeTransition>
</SwitchTransition>
</div>
</Fragment>
);
};
export default withRouter(App);
CSS код:
.fade-enter {
opacity: 0;
transform: translateX(100%);
}
.fade-enter-active {
opacity: 1;
transform: translateX(0);
transition: 350ms ease;
}
.fade-exit {
opacity: 1;
transform: translateX(0);
transition: 350ms ease;
}
.fade-exit-active {
opacity: 0;
transform: translateX(-100%);
transition: 350ms;
}
Следовательно, отвечая на свои вопросы:
- В качестве props у SwitchTranstion: mode="out-in" или mode="in-out", как и во vue.js означает как будут отображаться компоненты при анимации
- В качестве children принимает последовательно отображаемые компоненты react, обёрнутые в CSSTransition
- Задание классов анимации производится стандартным для CSSTransition способом в css-стилях, как видно из приведённого выше кода