React CSSTransition does not apply classes correctly

Question

I'm working on a carousel application and I have to use the React Transition Group to animate it. For some reason I can't seem to get the classes to apply correctly.

It's a mix of proprietary and open-source code, so if this example isn't enough I'm glad to expand my examples.

React render() calls this:

            {this.props.slides.map((slide, index) => (

          <CSSTransition
            key={this.index}
            in={this.appearHome}
            appear={true}
            timeout={600}
            classNames="carouselTransition"
          >

              <CarouselSlide
                key={index}
                index={index}
                activeIndex={this.state.activeIndex}
                slide={slide}
              />

          </CSSTransition>

        ))}

And then the css looks like this:

    /* appear on page load */
.carouselTransition-appear {
  opacity: 0;
  z-index: 1;
}

.carouselTransition-appear.carouselTransition-appear-active {
  opacity: 1;
  transition: opacity 600ms linear;
}

.carouselTransition-enter {
  opacity: 0;
  z-index: 1;
}

.carouselTransition-enter.CarouselTransition-enter-active {
  opacity: 1;
  transition: opacity 300ms linear;
}

.carouselTransition-exit {
  opacity: 1;
}

.carouselTransition-exit.carouselTransition-exit-active {
  opacity: 0;
  transition: opacity 300ms linear;
}

.carouselTransition-exit-done {
  opacity: 0;
}

The appear css applies but as I cycle the carousel I can see the enter and exit classes falling off of the divs, never to return. My suspicion is that I'm doing something wrong with the key={index} which I've read is an antipattern, but I'm not sure how to fix it.

Again, if more code is needed, say the word!

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

It's a tricky thing to work with, as I've heard from pretty much everywhere I turned to for help. They need to work on the documentation and build out some better examples! In any case, the CSS simply had the right things in the wrong places. Specifically, what I was trying to do in the done state needed to be done in the active state, and the stuff I was trying to do in the active state needs to be done in the enter state.

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

React CSSTransition does not apply classes correctly

1 Answers1