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

Question

我正在开发一个项目管理应用程序，我正在开发这个功能，项目标题可以进入编辑状态，用户可以编辑项目标题，这个标题有两个子组件 HeaderContent 和 EditProjectForm ：
>项目标头
-->标题内容
-->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, 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;

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