我正在尝试使用ReactCSSTransitionGroup对我的状态中的数组项进行动画处理。 appear
和enter
类正常工作,但leave
类不会触发。 我在reducer中使用以下代码来移除Items:
state.deleteIn(['globalArray','array'])
并填充它
state.setIn(['globalArray', 'array'], action.newItems)
渲染函数:
return (
<ReactCSSTransitionGroup transitionAppearTimeout={2000} transitionEnterTimeout={10000}
transitionLeaveTimeout={10000} transitionName={animation} transitionAppear={true}>
<Paper zDepth={2}>
<ReactImageFallback
src={ item.imagesrc }
fallbackImage={ item.imagesrc }
/>
</Paper>
</ReactCSSTransitionGroup>)
Css(仅供测试):
.enter {
}
.enter.enterActive {
}
.leave {
transform: translate(+100%,+50%) ;
}
.leave.leaveActive {
transition-timing-function: ease-in;
}
.appear {
opacity: 0;
transform: translate(-100%,-50%) ;
}
.appear.appearActive {
transition-duration: 5s ;
transition-timing-function: ease-out;
}
我也在使用cssNext。 有没有办法在删除时触发leave类?