ReactCSSTransitionGroup с модулями CSS

У меня есть ReactCSSTransitionGroup, которую я использую с модулями CSS (и динамической маршрутизацией от реакции-маршрутизатора, но я считаю, что это работает, как и ожидалось).

<ReactCSSTransitionGroup
  component="div"
  transitionName={transitions}
  transitionAppear
  transitionAppearTimeout={1000}
  transitionEnterTimeout={2000}
  transitionLeaveTimeout={2000}
>
  {React.cloneElement(this.props.children, {
    key: location.pathname,
  })}
</ReactCSSTransitionGroup>

appear а также leave переходы работают отлично - но enter переходы - нет, они просто появляются сразу, а предыдущий компонент исчезает после того, как новый компонент вошел.

CSS (с использованием CSS-модулей):

.enter {
  opacity: 0.01;
}

.enter.enterActive {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.leave.leaveActive {
  opacity: 0.01;
  transition: opacity 2000ms ease-in;
}

.appear {
  opacity: 0.1;
  transition: opacity 1000ms ease-out;
}

.appearActive {
  opacity: 1;
  transition: opacity 1000ms ease-out;
}

--- РЕДАКТИРОВАТЬ ---

Я обнаружил, что он работает, как и ожидалось, на дочерних маршрутах (у меня есть лишь небольшая часть из них в моем приложении). Все маршруты, включая дочерние, загружаются динамически, поэтому я до сих пор не уверен, что заставляет его работать в этих случаях, но не в других.

Источник

1 ответ

Существует много ошибок с переходами CSS на уровне браузера, и каждый тип перехода имеет различные зависимости (согласно документации)

Предлагаем использовать более удобный для разработчиков API:

Источник
Другие вопросы по тегам