CODEWITHSUNDEEP
reactjsreact-transition-group
jcmitch
jcmitch

Reputation: 2166

react-transition-group conditionally animate out

I'm trying to use react-transition-group to add some animation to a list that I have.

This is my general setup, I have list component that renders a number of children. There are a number of interactions that cause items to be added/removed from this list. Some of these actions need to cause the component to be removed using an animation but I can't seem to get that working and I'm guessing maybe I'm missing something here.

This is my basic setup:

<TransitionGroup className="list" component="ul">
   {this.props.item.map(item => (
      <CSSTransition key={item.id} timeout={500} classNames="fade" enter={false} exit={!!item.shouldAnimate}>
        <ChildComponent/>
      </CSSTransition>
    ))}
</TransitionGroup>

I have verified that everything is fine in my state logic (i.e. shouldAnimate is set to true as I expect but it still doesn't animate.

Any suggestions?

Edit: Created a fiddle showing the problem and I think I now see the issue. http://jsfiddle.net/af0ee2eo/2/

As I described above I don't know until the user takes an action if that action should be one that causes the item to be animated or not when it is removed from the list. I'm setting shouldAnimate correctly but then before the next render I'm removing that item from the list. If I delay the removal until after the next render things work okay but that's annoying to have to do every time (this is what I am demonstrating by the "Use Delay?" checkbox at the bottom of the fiddle). I wish there was a way to inject state into the state of the item held by TransitionGroup's component state.

If anyone has any other idea how I might fix this without a setTimeout or requestAnimationFrame render hack let me know otherwise I'll just mark this question as answered.

Upvotes: 1

Views: 2432

Answers (1)

jcmitch
jcmitch

Reputation: 2166

I've figured it out and just in case someone else comes along and see this the answer is to use the childFactory prop. It allows you to change prop values on leaving children.

Link with more info: https://medium.com/lalilo/dynamic-transitions-with-react-router-and-react-transition-group-69ab795815c9

Upvotes: 1

Related Questions