Выравнивание элементов с помощью React Transition Group - PullRequest
Новая
       13

Выравнивание элементов с помощью React Transition Group

0 голосов
/ 26 октября 2018

Я пытаюсь создать карусель с использованием группы реакции-перехода.У меня это в основном работает, но проблема у меня сейчас в том, что из-за того, что я считаю проблемой с потоком событий группы реагирования и перехода.Когда один элемент уходит, следующий элемент входит, но они оба занимают свои соответствующие места.Это толкает интерфейс вниз до тех пор, пока переход не будет завершен, поскольку два элемента складываются друг на друга.Затем, когда переход завершается, интерфейс возвращается на место.

Я не могу сказать, связана ли проблема с событиями, css или обоими.

Карусель в реакции: 

 <CSSTransition
   key={index}
   appear={true}
   in={index === this.state.activeIndex}
   timeout={600}
   classNames="carouselTransition"
   transitionAppear={true}
   unmountOnExit={true}
  >
    <CarouselSlide index={index} slide={slide} key={index} />
  </CSSTransition>

Код CSS: 

.carouselTransition-appear {
  opacity: 1;
  transform: translateY(-100%);
}

.carouselTransition-appear.carouselTransition-appear-active {
  /*opacity: 1;*/
  /*left:0px;
  transition: left 600ms linear;*/
}

.carouselTransition-enter {
  transform: translateX(99%);
}

.carouselTransition-enter.carouselTransition-enter-active {
  transition: transform 600ms ease-in-out;
  transform: translateX(0);
}

.carouselTransition-enter.carouselTransition-enter-done {
}

.carouselTransition-exit {
  transform: translateX(0);
}

.carouselTransition-exit.carouselTransition-exit-active {
  transition: transform 600ms ease-in-out;
  transform: translateX(-110%);
}

.carouselTransition-exit-done {
  left: -10000px;
  /*opacity: 0;*/
  opacity: 0;
  height: 0px;
}

1 Ответ

0 голосов
/ 30 октября 2018

Это была проблема с CSS.Я не использовал это правильно, чтобы управлять состояниями перехода.Это работает: 

.carouselTransition-appear {
  opacity: 1;
}

.carouselTransition-appear.carouselTransition-appear-active {

}

.carouselTransition-enter {
  transform: translateX(110%);
}

.carouselTransition-enter.carouselTransition-enter-active {
  transition: transform 600ms ease-in-out;
  transform: translateX(0);
}

.carouselTransition-enter.carouselTransition-enter-done {
}

.carouselTransition-exit {
  transform: translateX(0);
}

.carouselTransition-exit.carouselTransition-exit-active {
  transition: transform 600ms ease-in-out;
  transform: translateX(-100%);
}

.carouselTransition-exit-done {
  left: -10000px;
  opacity: 0;
  height: 0px;
}
...