如何在帧运动中修复退出动画？

问题描述

我有如下代码：

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未触发。

如何解决这两个问题？

解决方法

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

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

确保未卸载AnimatePresence或MyComponent（其中包含AnimatePresence）。 AnimatePresence应该一直渲染以正常工作。

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