React CSSTransition 没有正确应用类答案

【问题标题】：React CSSTransition does not apply classes correctlyReact CSSTransition 没有正确应用类
【发布时间】：2018-10-31 02:32:46
【问题描述】：

我正在开发一个轮播应用程序，我必须使用React Transition Group 对其进行动画处理。出于某种原因，我似乎无法正确应用这些课程。

它是专有代码和开源代码的混合体，所以如果这个示例还不够，我很乐意扩展我的示例。

React render() 调用这个：

            {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>

        ))}

然后css看起来像这样：

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

appear css 适用，但当我循环轮播时，我可以看到 enter 和 exit 类从 div 中脱落，永远不会返回。我怀疑我对key={index} 做错了，我读过它是一种反模式，但我不知道如何解决它。

同样，如果需要更多代码，请说出来！

【问题讨论】：

标签： javascript css reactjs react-transition-group

【解决方案1】：

这是一件棘手的事情，因为我从几乎所有我寻求帮助的地方都听说过。他们需要处理文档并构建一些更好的示例！无论如何，CSS 只是把正确的东西放在了错误的地方。具体来说，我在 done 状态下尝试做的事情需要在 active 状态下完成，而我在 active 状态下尝试做的事情需要在 enter 状态下完成。

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

【讨论】：