Motion: [BUG] AnimationPresence exit only works on direct descendants

[andrew-r-nf]

2. Describe the bug

Exit animation doesn't work unless motion component is a direct descendant of AnimationPresence

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/s/peaceful-margulis-lnc6b

4. Steps to reproduce

• Click the +/- buttons and the animations should work as expected.
• Then uncomment the lines 9 and 20
• Click the +/- buttons, the animation on mount works but the exit animation no longer works

5. Expected behavior

Exit animation to still work even if it's not a direct descendent

7. Environment details

OS: macOs Catalina
Browser: Chrome 78.0.3904.70

[mattgperry]

This is as per design. By uncommenting those lines you give AnimatePresence a single child which is never added or removed.

[deleteme]

The documentation has an example that matches this use case, but it does not mention anything about the exit animation not working. The presence of the exit prop implies that it is possible to animate the exit transition of nested motion components.

https://www.framer.com/api/motion/animate-presence/#animating-custom-components

const Item = () => (
  <div>
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    />
  </div>
)

export const MyComponent = ({ items }) => (
  <AnimatePresence>
    {items.map(({ id }) => (
      <Item key={id} />
    ))}
  </AnimatePresence>
)