我使用React的CSSTransitionGroup(新的react-transition-group@1.1.2。我不知道为什么,但是在应用3D样式之前进行了转换。
当前行为(在Chrome和Firefox中):
预期行为:
JSX:
<CSSTransitionGroup component="div" id="container" transitionName="fadeBox" transitionAppear={true} transitionAppearTimeout={500}
transitionEnter={false}
transitionLeave={false}>
{this.state.projects.map((project) => {
return (<Link to={"/project/" + project.id} key={"/project/" + project.id}>
<Box imageURL={project.imageURL} text={project.text} key={project.id} /> </Link>)
})}
</CSSTransitionGroup>
的CSS:
.fadeBox-appear {
opacity: 0.01;
transform: translate3d(0, -2%, 0);
}
.fadeBox-appear.fadeBox-appear-active {
opacity: 1;
transform: translate3d(0, 0%, 0);
transition: all 0.5s ease-in-out;
}