0

Документация по теме очень скудна, хотелось бы чтобы кто-нибудь разжевал подробно как использовать данный компонент, а именно:

  1. Какие у него props
  2. Что принимает в качестве children
  3. Как производится задание классов анимации

В общем, как его использовать на практике. Например, для переходов между компонентами react-router-dom

Код модуля react-transition-group: GitHub

Документация: SwitchTransition

1 ответ 1

0

В официальной документации 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;
}

Следовательно, отвечая на свои вопросы:

  1. В качестве props у SwitchTranstion: mode="out-in" или mode="in-out", как и во vue.js означает как будут отображаться компоненты при анимации
  2. В качестве children принимает последовательно отображаемые компоненты react, обёрнутые в CSSTransition
  3. Задание классов анимации производится стандартным для CSSTransition способом в css-стилях, как видно из приведённого выше кода

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.