Motion: AnimatePresence - exit not happening

[timscott]

Describe the bug
exit animation not happening with AnimatePresence.

To Reproduce

The following is my code (redacted):

{list.map(item => (
  <AnimatePresence>
    <motion.div
      initial={{opacity: 0}}
      animate={{opacity: 1}}
      exit={{opacity: 0}}
    >
      <MyComponent
        key={item.id}
        item={item}
      />
    </motion.div>
  </AnimatePresence>
))}

This is pretty much exactly like the example found here: https://www.framer.com/api/motion/examples/#exit-animations

Expected behavior

I expect MyComponent to fade out when it's item is removed from list. It does not. It just disappears.

Desktop (please complete the following information):

• OS: OSX 10.13.6
• Browser Chrome
• Version 76.0.3809.100

[mattgperry]

AnimatePresence should wrap the list otherwise it gets unmounted along with the item.

[timscott]

@InventingWithMonster - I revised to be:

<AnimatePresence>
  {list.map(item => (
    <motion.div
      initial={{opacity: 0}}
      animate={{opacity: 1}}
      exit={{opacity: 0}}
    >
      <MyComponent
        key={item.id}
        item={item}
      />
    </motion.div>
  ))}
</AnimatePresence>

And the behavior is the same. No exit animation.

[timscott]

Oops, I neglected to the move the key from MyComponent to motion.div. That fixed it.

[coolansplanet]

In my case it doesn't work on exit with React Router:

import React from "react";
import { BrowserRouter, Route, NavLink } from "react-router-dom";
import { AnimatePresence, motion } from "framer-motion";
import Hi from "./Hi";
import Something from "./Something";
import "./App.css";

const App = () => {
  return (
    <BrowserRouter>
      <AnimatePresence>
        <NavLink to="/">Hi</NavLink>
        <br />
        <NavLink to="/something">Something</NavLink>
        <hr />
        <Route path="/" exact={true} key="1">
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 2 }}
            key="hi"
          >
            <Hi />
          </motion.div>
        </Route>
        <Route path="/something" exact={true} key="2">
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            key="something"
            transition={{ duration: 2 }}
          >
            <Something />
          </motion.div>
        </Route>
      </AnimatePresence>
    </BrowserRouter>
  );
};

export default App;

[mattgperry]

@coolansplanet In this example no components are being added or removed from the tree

[hoagy-davis-digges]

Would you be able to elaborate on that point? I'm not clear why the motion.div elements are not being removed from the tree when the route which is visible changes