场景是:我想根据用户点击“下一个”还是“上一个”,在不同的方向上制作一系列类似 google-now 的卡片的动画。
使用 CSSTransitionGroup 可以轻松实现一个方向的动画 - 我让“下一张”按钮触发当前卡片向上滑动并消失(以及下一张卡片从下方向上滑动)。
但是,我还希望“上一张”按钮能够实现相反的过渡动画,即当前卡向下滑动(以及上一张卡向下滑动)。
问题的关键是 CSSTransitionGroup 应该保持挂载状态。我可以轻松拥有类似 <CSSTransitionGroup transitionName={this.state.isForward ? 'animate-forward' : 'animate-back'}
的东西并让下一个/上一个按钮调用 setState({isForward: ...})
,但这似乎不起作用,可能是因为 CSSTransitionGroup 必须重新渲染。
我所描述的内容可以通过 CSSTransitionGroup 实现吗?
最佳答案
是的,但不是通过更改转换名称,而是通过每个方向使用不同的类包装所有内容:
如果说卡片从左侧送入并在中心呈现,并在右侧被消除。
JSX:
<div className={"wrapper" + animationDirection} >
<ReactCSSTransitionGroup
transitionName="card"
transitionEnterTimeout={200}
transitionLeaveTimeout={200}>
{cards}
</ReactCSSTransitionGroup>
</div>
SCSS:
.wrapper.adding-cards {
.card {
&.card-enter {
// set to left position
}
&.card-enter.card-enter-active {
// set to center position
}
&.card-leave-active {
// set to right position
}
}
}
.wrapper.removing-cards {
.card {
&.card-enter {
// set to right position
}
&.card-enter.card-enter-active {
// set to center position
}
&.card-leave-active {
// set to left position
}
}
}
关于reactjs - 是否可以使用 CSSTransitionGroup 根据状态以两种不同的方式进行动画处理?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33046175/