reactjs - Framer-motion exit-animationen utlöses inte

https://codesandbox.io/s/framer-motion-not-working-id46n?file=/src/Notifications.tsx

Som du kan se i denna gif, gör inte notiserna utgångsanimeringen när de tas bort från DOM:en. (vilket de får respektive 6 sekunder efter att de skapades). Varför?

Jag har gjort allt som nämndes i de andra svaren, såsom:

  1. Lägger till en unik nyckel till varje notifikation barn
  2. <Routes location={location} key={location.pathname}>
  3. osv.

Varför fungerar det inte?

Mål: Få notiserna att spela någon typ av avslutningsanimation när de tas bort (dvs efter den angivna notisens varaktighet)

Svar #1

De utgående elementen behöver vara direkta barn till <AnimatePresence>-taggen.

Din sandlåda körs inte här, så jag kan inte verifiera lösningen, men det borde fungera om du ändrar din struktur från detta:

<AnimatePresence>
  <NotificationContext>
    <div id="notificationCenter">
      <motion.div key={notification.id} />
    </div>
  </NotificationContext>
</AnimatePresence>

till detta:

<NotificationContext>
  <div id="notificationCenter">
    <AnimatePresence>
      <motion.div key={notification.id} />
    </AnimatePresence>
  </div>
<NotificationContext>

Relaterade artiklar