在存在时设置帧器运动动画的奇怪行为

Question

我正在开发项目管理应用程序，我正在开发这个功能，项目标题可以进入编辑状态，用户可以编辑项目标题，这个标题有两个子组件HeaderContent和EditProjectForm：
>项目标题
->页眉内容
->编辑项目窗体
我现在的问题是，当我淡出HeaderContent时，淡出的InEditProjectForm最初被按下，然后它跳到它的位置，这似乎是因为即使HeaderContent淡出了，它仍然会影响dom结构

这是我刚刚上传的一段短屏幕录音，以进一步澄清问题https://www.youtube.com/watch?v=UerYDuEcUWQ

标题组件

const ProjectHeader=()=>{
const [isEditingState, setisEditingProject] = useState({value:false,triggerFrom:"PANEL_HEADER"})
return <div>
<HeaderContent {...{isEditingProject, setisEditingProject}}    />
<EditProjectForm {...{isEditingProject, setisEditingProject}} />
</div>
}

标题内容

const HeaderContent =({isEditingProject, setisEditingProject})=>{
const [render, setrender] = useState(true)
useEffect(() => {
let ref=null
// if(isEditingProject.triggerFrom =="EDIT_PROJECT_FORM") if I have don this whenever I change isEditingProject.value from this component this setTimeout below will be fired and I want to only be fired when this compoent is unmounted 
if(isEditingProject.triggerFrom =="EDIT_PROJECT_FORM"){
ref= setTimeout(() => {
setrender(!isEditingProject.value)
}, 200);//wait until edit form finishes its fade_out animtion
}
return ()=>ref && clearTimeout(ref)
}, [isEditingProject])

return <AnimatePresence  initial={false} >
{
render
&&(<motion.div 
animate={{opacity:1 ,y:0}}  
initial={{opacity:1 ,y:0}}
exit   ={{opacity:0    ,y:10}}
transition={{
duration:.2,
opacity: { type: "spring", stiffness: 100 },
}}>
//.. header links and buttons and the title 
<button onClick={e=>{
setrender(false)                    
setisEditingProject({...isEditingProject,value:true,triggerFrom:"PANEL_HEADER"})
}} >edit</button>
}
</AnimatePresence  >
}

编辑项目表单

const EditProjectForm =({isEditingProject, setisEditingProject})=>{
const [render, setrender] = useState(true)
useEffect(() => {
let ref =null
// if(isEditingProject.triggerFrom =="PANEL_HEADER") if I haven't don this whenever I change isEditingProject.value from this component this setTimeout below will be fired and I want to only be fired when this compoent is unmounted 
if(isEditingProject.triggerFrom =="PANEL_HEADER"){
ref=setTimeout(() => {
setrender(isEditingProject.value)
}, 200);
}
return ()=>ref && clearTimeout(ref)
}, [isEditingProject.value])
return <AnimatePresence>
{
render &&  <motion.form
animate={{  opacity:1 ,y:0  }}  
initial={{  opacity:1 ,y:10 }}
exit   ={{  opacity:0 ,y:-10}}
transition={{
duration:.2,
opacity: { type: "spring", stiffness: 100 },
}}
>
/.. title input 
<button onClick={e=>{
setrender(false)                    
setisEditingProject({...isEditingProject,value:true,triggerFrom:"EDIT_PROJECT_FORM"})
}} >edit</button>
</motion.form>
}
</AnimatePresence>
}

Answer 1

这是css的问题，而不是framer的问题。我的建议是用div绝对位置来包装您的组件，其中top：0；

也许，你有一些flexdiv触发了这个"；奇怪的"；行为