I'm trying to animate an array of items from my state with ReactCSSTransitionGroup. The appear
and enter
classes work fine, but the leave
class won't trigger. I'm removing the Items in my reducer with
state.deleteIn(['globalArray','array'])
and fill it with
state.setIn(['globalArray', 'array'], action.newItems)
Render function:
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 (just for testing):
.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;
}
I'm also using cssNext. Is there a workaround to get the leave class triggered on delete?
You update your state but you don't use it to render your elements (or at least not from the code you shared).
If you want your Paper
to be animated on enter or leave based on your component's state. For instance :
render() {
let items = this.state.items.map(item => (
<Paper zDepth={2} key={/* unique key or index here */}>
<ReactImageFallback
src={ item.imagesrc }
fallbackImage={ item.imagesrc }
/>
</Paper>
));
return (
<ReactCSSTransitionGroup /*transitionE... props here */>
{items}
</ReactCSSTransitionGroup>
);
}