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

问题描述

我正在开发一个项目管理应用程序，我正在开发这个功能，项目标题可以进入编辑状态，用户可以编辑项目标题，这个标题有两个子组件 HeaderContent 和 EditProjectForm ：
>项目头
-->标题内容
-->编辑项目表单
我现在的问题是，当我淡出 HeaderContent 时，淡入 EditProjectForm 最初被推下然后它跳到它的位置，似乎发生这种情况是因为即使 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,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,}}
       >
        /.. title input 
          <button onClick={e=>{
           setrender(false)                    
           setisEditingProject({...isEditingProject,triggerFrom:"EDIT_PROJECT_FORM"})
           }} >edit</button>
      </motion.form>
    }
</AnimatePresence>
}

解决方法

这是css的问题，而不是framer。我的建议是用 div 绝对位置包裹你的组件，其中 top:0;

也许，你有一些 flex div 触发了这种“奇怪”的行为