在 Array.map()（或有条件地）渲染的 React 组件的 Framer Motion 中未触发退出转换

Question

I am trying to use the framer-motion package's AnimatePresence component to animate components as they enter/leave the DOM.

I have a section in my app that renders components in a table using Array.map() , where each item in the table has initial , animate , exit , and transition props. The array which gets mapped is stored in state using React.useState . Components correctly enter the DOM with a transition animation on page load, and they also exit the DOM with a transition on page navigation.

The effect I'm trying to create is for all items except the one clicked to transition off screen.

The issue I'm having is that when the array of items is updated using React.useState and Array.filter() , the items disappear without a transition. It doesn't seem to be an issue with React.useState updating with a new array, because when I add duplicate elements using Array.concat() (which returns a new array), they correctly transition on screen at the bottom of the table, while the existing components remain where they are and aren't re-mounted.

The components are no longer rendered, but it seems as though they are not actually being unmounted when the array updates. If so, why aren't they unmounted? Is there a way to render components with Array.map() and then manually unmount them conditionally from the parent on a state change?

Note: In addition to Array.map() this also occurs when you conditionally render a component using && or a ternary operator.

Here's my code:

const data = [
  { title: "Item 1", Description: "First item", id: 1 },
  { title: "Item 2", Description: "Second item", id: 2 },
  { title: "Item 3", Description: "Third item", id: 3 },
  { title: "Item 4", Description: "Fourth item", id: 4 },
  { title: "Item 5", Description: "Fifth item", id: 5 }
];

export default function App() {
  const [arrayItems, setArrayItems] = React.useState(data);

  const handleClick = (item) => {
    // Correctly displays entrance animation for new element
    // setArrayItems(arrayItems.concat([item]));

    // Does not show exit animation for deleted elements
    setArrayItems(arrayItems.filter((element) => element.id === item.id));
  };

  React.useEffect(() => {
    setArrayItems(data);
  }, []);

  return (
    <div className="App">
      <AnimatePresence>
        <table style={{ borderCollapse: "collapse" }} key="1">
          {arrayItems.map((item) => (
            <ListItem handleClick={handleClick} item={item} key={item.id} />
          ))}
        </table>
      </AnimatePresence>
    </div>
  );
}

code sandbox:

https://codesandbox.io/s/white-field-6evzg?file=/src/App.js

Answer 1

After reviewing the framer-motion documentation again, I was able to figure out what the issue was. The documentation says that:

"The component being removed must be a direct descendant of AnimatePresence due to limitations with React."

So the fix is just to change my code from this:

<AnimatePresence>
  <table style={{ borderCollapse: "collapse" }}>
    {arrayItems.map((item) => (
      <ListItem
       handleClick={handleClick}
       item={item}
       key={item.id}
      />
    ))}
  </table>
</AnimatePresence>

To this:

<table style={{ borderCollapse: "collapse" }}>
  <AnimatePresence>
    {arrayItems.map((item) => (
      <ListItem
       handleClick={handleClick}
       item={item}
       key={item.id}
      />
    ))}
  </AnimatePresence>
</table>

Strangely, in the case of my actual code, AnimatePresence is actually wrapping the root DOM element in gatsby-browser.js , but motion components several layers down would successfully animate using the exit animation (but only on page navigation). I'm still not quite sure why it works in the case of page navigation and not for conditionally rendered components, but it must have something to do with the way React unmounts components under the hood.

Framer docs: https://www.framer.com/docs/animate-presence/##animating-custom-components

Answer 2

Please try with this solution

Please do the following code change, this will provide remaining item after removing the target item.

setArrayItems(arrayItems.filter((element) => element.id === item.id));

Changed to

setArrayItems(arrayItems.filter((element) => element.id !== item.id));