Как TransitionGroup добавить один класс для начального монтирования, другой для модификации дочерних - PullRequest
Новая
       10

Как TransitionGroup добавить один класс для начального монтирования, другой для модификации дочерних

0 голосов
/ 13 февраля 2019

У меня есть компонент в TransitionGroup (из реагирующей-переходной группы), который изначально скрыт, а затем переключается между различными версиями этого компонента в зависимости от пользовательского ввода.Эта логика работает отлично прямо сейчас.У меня есть компонент в CSSTransition, который прямо сейчас просто открывается как гармошка с max-height и набором переходов.Я бы хотел, чтобы он работал как карусель, но он открывается вначале с переходом аккордеона, а затем «смахивает» влево и вправо, как карусель, когда пользователь выбирает различные параметры, а затем снова закрывается, как аккордеон.

Я думаю, что мне нужно, чтобы TransitionGroup добавила один класс для начального открытия, а затем другой класс для перехода между компонентами.Кто-нибудь знает способ сделать это?

У меня есть компонент пропа на TransitionGroup для нуля, потому что мне это не нужно.Я попытался оставить это div, но он сам не применяет переходные классы.Если есть способ, чтобы это произошло, это могло бы сработать.

Вот этот компонент пока: 

const ExpandedTopic = ({ topics, expandedTopic, closeTopic }) => {
  return (
      <TransitionGroup component={null}>
        {topics.filter(topic => topic._key === expandedTopic).map(topic => {
          return (
            <CSSTransition
              key={key}
              classNames="topic"
              timeout={duration}
              appear={true}
            >
              {...}
            </CSSTransition>
          );
        })}
      </TransitionGroup>
  );
};

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

Я также изучал все видыCSS вуду, потому что, если бы я мог выбрать входящий класс «enter-active», когда за ним следует исходящий класс «exit-active», я мог бы сделать это.Но селекторы одноуровневых элементов CSS (+ и ~) выбирают только те вещи, которые основаны на предшествующих им селекторах.Я не могу найти способ выбрать что-либо на основе последующего селектора, только наоборот.

...