Question

我正在尝试使用react-transition-group创建轮播。我已经使其大部分工作了，但是现在我遇到的问题是，由于我认为这是react-transition-group事件流的问题。当一个元素离开时，下一个元素进入，但是它们都占据了各自的空间。这将接口向下推，直到过渡完成为止，因为两项相互叠加。然后，当过渡完成时，界面将恢复原位。

我无法确定问题是否出在事件，css或两者之间。

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代码：

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

Answer 1

这是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;
}

使用React Transition Group保持元素对齐

1 个答案: