切换开关Bug：滑块点击后斜向移动而非直线右移

你的Toggle开关初始状态下滑块垂直居中，但点击后滑块出现斜向移动，核心原因是选中状态的transform覆盖了初始的translateY(-50%)——初始时通过这个属性让滑块垂直居中，选中后只设置translateX(32px)会完全替换原有transform值，导致滑块失去垂直居中定位，同时向右移动，视觉上呈现斜向效果。

修复方案一：保留复合transform属性 #

修改选中状态的transform，同时保留垂直和水平位移：

.toggle:checked ~ .label::after{
    transform: translateY(-50%) translateX(32px);
}

或者用更简洁的translate()复合写法：

.toggle:checked ~ .label::after{
    transform: translate(32px, -50%);
}

修复方案二：改用left属性控制水平位置 #

如果不想依赖transform的复合写法，可以调整伪元素的定位方式：

.label {
    width:60px;
    height: 30px;
    border-radius:30px;
    display: block;
    background-color: #ebebeb;
    box-shadow: 1px 2px 5px 1px rgba(0,0,0,0.2) inset;
    left:10px;
    position: relative; /* 去掉原来的padding-left，用伪元素的left控制初始位置 */
    
    &::after {
        content: '';
        position: absolute;
        width: 23px;
        height: 23px;
        border-radius: 50%;
        background-color: green;
        top: 50%;
        left: 5px; /* 初始左侧间距 */
        transform: translateY(-50%);
        transition: all 0.3s; /* 确保left和transform都有过渡效果 */
    }
}

.toggle:checked ~ .label::after{
    left: calc(100% - 23px - 5px); /* 计算右侧间距，确保滑块不超出开关 */
}

原理说明 #

初始状态下，伪元素通过top:50% + transform: translateY(-50%)实现垂直居中。当checkbox被选中时，如果只设置transform: translateX(32px)，会覆盖掉之前的translateY，导致滑块垂直方向回到top:50%的原始位置（即垂直方向未居中），同时水平右移，最终看起来是斜向移动。只有保留垂直位移的设置，才能让滑块保持垂直居中的同时仅做水平直线移动。

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