Keeping Elements Aligned Using React Transition Group

Question

I'm trying to create a carousel using the react-transition-group. I've got it mostly working, but the issue I have now is that due to what I think is an issue with the react-transition-group events flow. As one element leaves the next element comes in but they both occupy their respective spaces. This pushes the interface down until the transition is completed as the two items stack on top of each other. Then when the transition completes the interface snaps back into place.

I can't tell if the problem is with the events, the css, or both.

Carousel in React:

 <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 Code:

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

score 0 · Answer 1 · answered Oct 30 '18 at 18:35

It was a problem with the CSS. I wasn't using it correctly to manage the states of the transition. This works:

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

Keeping Elements Aligned Using React Transition Group

1 Answers1