React实现div右向左滑动切换 固定Bootstrap进度条位置

问题根源 #

你给两个切换div设置position: absolute后，元素脱离了正常文档流，父元素没有了子元素支撑高度直接塌陷，进度条自然就会向上移动到两个div原本的位置。解决核心就是给切换区域套一个固定高度的外层容器，占住布局位置。

解决步骤 #

1. 新增切换区域外层容器

修改RegistrazioneElements.js，新增一个相对定位的外层容器，设置最小高度保证能容纳两个切换表单的内容：

// 新增容器组件
export const RegisterFormContainer = styled.div`
  position: relative;
  width: 100%;
  min-height: 800px; // 可根据你实际表单的最大高度调整
`

同时修改两个切换div的样式，加上绝对定位配置：

export const RegisterChoice = styled.div`
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    clear: both;

    @media screen and (max-width: 1250px) {
        padding: 20px;
    }
`

export const RegisterChoiceEmail = styled.div`
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    flex-direction: column;
    align-items: center;
    display: none;

    @media screen and (max-width: 1250px) {
        padding: 20px;
    }
`

2. 修改组件结构包裹切换区域

修改Registrazione.js的返回结构，把两个切换div套在刚才新增的RegisterFormContainer里：

return (
    <Register>
        {/* 新增外层容器，占住高度不塌陷 */}
        <RegisterFormContainer>
            <RegisterChoice id="registerChoice">
                {/* 原有内容无需修改 */}
            </RegisterChoice>
            <RegisterChoiceEmail id="registerChoiceEmail">
                {/* 原有内容无需修改 */}
            </RegisterChoiceEmail>
        </RegisterFormContainer>
        <ProgressBar id="progressBar" striped animated variant="success" now={percentage} style={{width: "70%", margin: "90px auto"}} />
    </Register>
)

优化建议（可选） #

你当前用jQuery做动画的方式和React的响应式逻辑不契合，也额外引入了不必要的依赖，可以直接用React状态+CSS过渡实现相同效果，避免操作真实DOM：

1. 新增状态控制表单显示：const [showEmailForm, setShowEmailForm] = useState(false)
2. 把两个div的display控制改成CSS过渡属性，通过showprops控制位移、透明度
3. 点击事件直接修改状态即可，无需调用jQuery方法

内容的提问来源于stack exchange，提问作者BlowLore