React应用中数组变更时CSS Transition丢失问题求助

Hey there! Let's break down why only your "Next" button's transition is working, even though your array updates correctly and you've got unique keys set up.

First, let's recap your scenario #

You've built a simple React app that uses shift/unshift on an array of letters. Clicking "Next" (triggers shift) plays the transition animation as expected, but clicking "Back" (triggers unshift) doesn't—even though the array state updates properly. You suspect it's a lower-level issue than React itself, and you've already ensured keys are unique to avoid unwanted re-renders.

Common Culprits & Fixes #

Let's walk through the most likely reasons this happens, with actionable checks:

1. Are you using immutable state updates correctly?

Your code snippet mentions wondering if slice or direct shift affects re-renders—this is a great spot to start. React relies on detecting new state references to trigger updates, so modifying the original array (with shift/unshift directly) can cause unexpected behavior, even if the array looks like it's updating.

Fix this by always creating a new array when updating state:

// For "Next" (shift)
clickNextHandler = () => {
  this.setState(prevState => ({
    list: prevState.list.slice(1) // Creates a new array without the first item
  }));
};

// For "Back" (unshift)
clickBackHandler = () => {
  const newItem = /* Your letter to add back */;
  this.setState(prevState => ({
    list: [newItem, ...prevState.list] // Creates a new array with the item added to the start
  }));
};

Even if your array updates work now, immutable updates ensure React can reliably track changes for animations.

2. Your animation CSS only handles "exit" (shift) but not "enter" (unshift)

If you're using CSS transitions (or React Transition Group), chances are your styles only account for elements sliding out (when you shift), not sliding in (when you unshift).

For example, if your CSS looks like this (only exit animation):

.list-item {
  transition: transform 0.3s ease;
}
.list-item.exit {
  transform: translateX(-100%);
}

You're missing the rules for when new items enter (unshift):

/* Add these for the "Back" button's animation */
.list-item.enter {
  transform: translateX(100%);
}
.list-item.enter-active {
  transform: translateX(0);
}

Make sure your code applies these enter/enter-active classes when adding items via unshift.

3. React Transition Group configuration gaps

If you're using TransitionGroup and CSSTransition, double-check these settings:

• Ensure enter={true} is set on your CSSTransition component (it's enabled by default, but it's worth verifying)
• Never use array indexes as keys—even if they feel "unique," unshift changes all existing indexes, which confuses React's element tracking. Use a unique identifier from your letter items instead (e.g., item.id instead of index)
• Confirm your timeout value matches your CSS transition duration so React doesn't remove the element before the animation finishes

Example correct setup:

import { TransitionGroup, CSSTransition } from 'react-transition-group';

// ...

<TransitionGroup>
  {this.state.list.map(item => (
    <CSSTransition
      key={item.id} // Use item's unique ID, NOT index!
      timeout={300}
      classNames="list-item"
      enter={true}
      exit={true}
    >
      <div className="list-item">{item.letter}</div>
    </CSSTransition>
  ))}
</TransitionGroup>

4. Debug the DOM to see what's happening

Open your browser's DevTools Elements panel and click the "Back" button. Watch if the new item gets the animation classes (like list-item-enter/list-item-enter-active). If not, your code isn't triggering the enter animation correctly—this points to a logic issue in how you're linking the unshift action to the animation trigger.

Final Thought #

The most likely fix here is either missing CSS for the enter animation or a small misconfiguration in how you're handling state updates or Transition Group settings. Since your array works correctly, the issue is almost certainly tied to how React (or your CSS) detects and triggers the animation for new elements added to the start of the array.

内容的提问来源于stack exchange，提问作者bigbitecode