I noticed this behavior while using the react-transition-group
package in a gatsby project I'm working on. I have a list of "tags" that are added to an active list as they are picked from another master list. Clicking a tag from the master list adds it to the active list, and clicking a tag from the active list removes it. Pretty much how you would expect something like this to work.
The transition in works just fine, but when transitioning out the tags re-organize themselves in a strange way. We have five tags with the following values:
- Dairy Free
- Party Food
- Family Sized
- Low Cholesterol
- Low Sodium
If you click the Family Sized
tag to remove it, the following occurs:
Family Sized
disappears instantlyLow Cholesterol
andLow Sodium
shift instantly to the left- The last tag changes to
Low Sodium
instantly - The last tag, now with the value of
Low Sodium
transitions out
The expected behavior is that the Family Sized
tag transitions out from where it is in the middle of the group. I should note that it works fine if you remove the last tag from the active list, this only happens when removing a tag from any other position.
Here is a slowed-down GIF of the transition and here is my code:
<TransitionGroup className='tag-container'>
{filter.map((tag, index) => {
return (
<CSSTransition key={index} timeout={250} classNames={`tag`}>
<TagButton value={tag} onClick={onClickFunction} className={`${screenStyle} active`}>{tag}</TagButton>
</CSSTransition>
)
})}
</TransitionGroup>
filter
is an array destructured from the component's state.- There is a
<StaticQuery>
fromgatsby
used in the samerender()
method of the component if that matters. - The
<TagButton>
is a styled component fromstyled-components
package, not a separately imported component.