motion
motion copied to clipboard
[BUG] If "popLayout" exit animation is interrupted (and element enters again), [data-motion-pop-id] remains!
I am using css to target [data-motion-pop-id] which is applied during a popLayout exit transition
[data-motion-pop-id] {
pointer-events: none;
z-index: 1;
}
If an element's popLayout exit transition is interrupted (by re-entering the element before the exit is complete), the [data-motion-pop-id] still persists. I think this should be removed when the exit transition is changed back to the animate state.
Ideally I want to do something like this
const presenceTransitions = {
initial: { opacity: 0, zIndex: 1 },
animate: { opacity: 1, zIndex: 1 },
exit: { opacity: 0, zIndex: 0, pointerEvents: 'none' },
} as const
//I've also tried
export const presenceTransitions = {
initial: { opacity: 0, zIndex: 1, pointerEvents: 'auto' },
animate: { opacity: 1, zIndex: 1, pointerEvents: 'auto' },
exit: { opacity: 0, zIndex: 0, pointerEvents: 'none' },
} as const
//NOTE: `layout` is applied, don't know if layout overwrites some styles
<motion.div layout {...presenceTransitions} />
But the zIndex and pointerEvents don't seem to apply at all. I don't know if it's because its a layout is applied and somehow the layout transition is overriding these.
Thanks