我正在尝试使用 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;
}
最佳答案
这是 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;
}
关于css - 使用 React 过渡组保持元素对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53015330/