framer-motion - 如何修复 Frame-motion 中的退出动画？

Question

我有如下代码：

export default ({ er, setError }) => {

    React.useEffect(() => {
        setTimeout(() => {
            setError('')
        }, 2000);
    }, [setError]);

    return (
        <AnimatePresence onExitComplete={()=>console.log('exit')}>
            { er && <motion.div  style={{ position: 'absolute', bottom: '10rem', right: '0' }} key="er" exit={{ x: 100 }} animate={{ x: -15 }} initial={{ x: 100 }} transition={{ duration: .8, ease: 'backInOut' }}>
                 ERROR : {er}
            </motion.div>}
        </AnimatePresence>
    );
}

有两件事没有发生

1. 退出动画未显示（我相信组件已卸载并且没有时间显示动画，我正在寻找解决该问题的方法）
2. 未onExitComplete触发。

如何解决这2个问题？

Answer 1

我试图重现您的问题，但没有成功，一切正常。

Codesandbox：https ://codesandbox.io/s/httpsstackoverflowcomquestions64052723-jdeg4?file=/src/App.js

确保您没有卸载AnimatePresence或MyComponent（其中包含AnimatePresence）。AnimatePresence应该一直渲染才能正常工作。

// Not going to work
{someCondition && <AnimatePresence>...<AnimatePresence />}