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;
}

--- ИЗМЕНИТЬ ---

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


reactjs css-modules reactcsstransitiongroup
person Toby    schedule 26.09.2016    source источник
comment
вот попробуйте эту скрипту, я изменил время .enter.enteractive на 2000 jsfiddle.net/dcfsyre2, чтобы вы объясняете проблему, с которой вы столкнулись? или не могли бы вы опубликовать скрипку и объяснить проблему   -  person Pritish Vaidya    schedule 04.10.2016
comment
Я сомневаюсь, что это из-за места, где вы импортируете свои стили css. Попробуйте импортировать файлы css в какой-нибудь корневой модуль, чтобы он подействовал как можно раньше.   -  person Jason Xu    schedule 08.11.2016

Ответы (1)


arrow_upward
2
arrow_downward

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

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

person Blair Anderson    schedule 12.01.2017