我正在处理轮播应用程序,因此必须使用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}
做错了反模式,但是我不确定如何解决。
再次,如果需要更多代码,请说出这个单词!
答案 0 :(得分:0)
这是一件棘手的事情,因为我几乎遍及所有寻求帮助的地方。他们需要处理文档并建立一些更好的示例!无论如何,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;
}