css - 使用 React 过渡组保持元素对齐

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