登录页面点击Sign Up无切换效果，寻求技术排查方案

问题描述 #

制作了带滑动切换效果的登录页面，点击Sign Up按钮后页面无任何反应，已确认JS文件链接正常、CSS无语法错误，Chrome控制台未显示报错信息。

问题根源分析 #

JS逻辑是通过给main（即.container元素）添加/移除right-panel-active类触发切换，但当前CSS存在两个关键缺失：

• 容器未设置相对定位：.overlay-container使用绝对定位，但父元素.container未设置position: relative，导致绝对定位元素的参照对象错误，平移效果无法正常触发。
• 登录/注册面板缺少基础定位与过渡配置：.sign-in和.sign-up没有默认的绝对定位、宽高及过渡属性，添加right-panel-active类后无法产生预期的平移切换效果。

修复方案 #

补充基础CSS样式 #

在现有CSS中添加以下代码：

.container {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 500px;
    margin: 0 auto;
    overflow: hidden;
}

.sign-in, .sign-up {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    transition: transform 0.6s ease-in-out;
    opacity: 0;
    z-index: 1;
}

.sign-in {
    opacity: 1;
    z-index: 2;
}

修复效果说明 #

添加上述CSS后，点击Sign Up按钮时，.container会被添加right-panel-active类，触发以下效果：

• .sign-in面板向右平移100%，移出视野
• .sign-up面板向右平移100%并显示（opacity变为1，z-index提升）
• 覆盖层容器和内部元素同步完成平移过渡

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