左过渡不能双向工作（从左到右工作但不是相反）

Question

我分别在开关和手柄上使用位置relative和absolute，然后在手柄上使用left将其移动到'cSwitch'的末尾或开始但是我应用的过渡持续时间只适用于从左到右。

我也尝试过应用 right，但这并没有改变任何东西。

const cSwitch = document.querySelectorAll('.cSwitch')[0];

cSwitch.onclick = () => {
  
  (cSwitch.getAttribute('state') === 'on') ? cSwitch.setAttribute('state', 'off') : cSwitch.setAttribute('state', 'on');

}

.cSwitch{
    
    position: relative;
    
    width: 150px;
    aspect-ratio: 2/1;
    
    border-radius: 50px 50px;
  
  background: crimson;
    
}

.cSwitch[state = on] .cSwitch_handle{
    
    position: absolute;
    
    left: 50%;
    
}

.cSwitch_handle{
    
    width: 75px;
    aspect-ratio: 1;
    
    border-radius: 50%;
    
    background: skyblue;
    
    left: 0%;
    
    transition: left 0.5s;
    
}

<div class="switch-wrapper">
                            
    <div class="cSwitch" state="off" id="neon-switch">
         <div class="cSwitch_handle"></div>
    </div>
                        
</div>

Answer 1

您在默认状态下忽略了应用position: absolute，所以left没有效果。 left 可能会从 50% 转换回 0%- 但它 不适用 ，因为元素未定位。

改为使用 .cSwitch_handle 选择器将 position: absolute 放入规则中。

左过渡不能双向工作（从左到右工作但不是相反）

left transition not working both ways (works left to right but not the other way around)

html

css

margin

css-position

css-transitions