react transition group
Created: 2018-03-30 11:15:53 -0700 Modified: 2018-03-30 14:29:21 -0700
Using this to animate widthSection titled Using this to animate width
This talks about a specific case that I had in Bot Land where I wanted to animate the width on a mission’s progress bar and then do something only when that was complete.
At first, I thought to use CSS transitions, but that could be cumbersome for several reasons:
- Differentiating between various transitions that happen
- Having to add/remove event handlers myself
If you do want to use the CSS way of handling animations, I’ve got some code here that I am going to delete from my codebase since I use React now:
Here’s the solution I came up with in React:
Things to note:
- I need to have the starting and ending values at the same time, otherwise I can’t apply the animation correctly since it needs to be done through JS (since the mission progress is dynamic).
- Note: if you always wanted to animate between static values, then you could still use this solution and just manually type “0%” and “100%” or something like that.
- I have a setTimeout on the “transitionInProp” so that the animations don’t start until the component has been mounted for at least 500 ms. I had tried instead to just change “endingFillPercent” after the component had already mounted, but that turned out to be a terrible idea because a CSS transition would have already kicked off (internally in react-transition-group) as soon as “transitionInProp” is true, so the “onEntered” callback would get hit way before the progress bar finished filling up if you changed the prop mid-animation.