为什么react-transition-group无法正常工作？

Question

I am trying to use animation when the state changes and elements mounts, tried the way mentioned in React Transition Group documentation but failed.

I have a UI something like this:

The center circle item is an active item and changes when the user selects other items.

I want fadeIn and fadeOut animation effects when the item changes.

created the example of the code codesandbox link

a snippet of code:

jsx:

   <TransitionGroup>
              {this.state.items.map((data, index) => (
                <CSSTransition key={index} timeout={1000} classNames="item">
                 <div
                   className={"list " + (index === 2 ? " active" : "")}
                   key={index}
                   onClick={() => this.setItems(data)}
                 >
                  <span>{data}</span>
                </div>
             </CSSTransition>
           ))}
       </TransitionGroup>

css:

 .item-enter {
      opacity: 0;
    }
    .item-enter-active {
      opacity: 1;
      transition: opacity 1000ms ease-in;
    }
    .item-exit {
      opacity: 1;
    }
    .item-exit-active {
      opacity: 0;
      transition: opacity 1000ms ease-in;
    }

Answer 1

It's look like you are simply reordering the element.

try this https://popmotion.io/pose/examples/posegroup-reordering/