reactjs - แอนิเมชันออกของ Framer-motion ไม่ทำงาน

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

อย่างที่คุณเห็นในไฟล์ gif นี้ การแจ้งเตือนไม่ทำอนิเมชันการออกเมื่อถูกลบออกจาก DOM (ซึ่งพวกมันจะถูกลบหลังจากปรากฏ 6 วินาที) ทำไมถึงเป็นแบบนั้น?

ฉันได้ทำทุกอย่างที่กล่าวถึงในคำตอบอื่น ๆ เช่น:

1. การเพิ่ม คีย์เฉพาะ ให้กับเด็กการแจ้งเตือนแต่ละรายการ

2. <Routes location={location} key={location.pathname}>

3. ฯลฯ

ทำไมมันถึงใช้ไม่ได้?

เป้าหมาย: ให้การแจ้งเตือนเล่นอนิเมชันออกเมื่อถูกลบ (เช่น หลังจากระยะเวลาการแจ้งเตือนที่กำหนด)

คำตอบ #1

องค์ประกอบที่กำลังออกต้องเป็น ลูกโดยตรง ของแท็ก <AnimatePresence>

แซนด์บ็อกซ์ของคุณไม่สามารถใช้งานที่นี่ได้ ดังนั้นฉันจึงไม่สามารถตรวจสอบวิธีแก้ได้ แต่ควรใช้งานได้หากคุณเปลี่ยนโครงสร้างของคุณจากแบบนี้:

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

ไปยังนี้:

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