Ответ 1
На уровне браузера существует множество ошибок с переходами CSS, и каждый тип перехода имеет разные зависимости (согласно docs)
Предложение заключается в использовании более подходящего разработчика api:
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;
}
--- EDIT ---
Я обнаружил, что он работает так, как ожидалось, на дочерних маршрутах (у меня есть только небольшая часть из них в моем приложении). Все маршруты, включая дочерние маршруты, загружаются динамически, поэтому я все еще не уверен, что заставляет его работать в этих случаях, но не в других.