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

I use position relative and absolute on the switch and handle respectively, then use left on the handle to move it to the end or start of 'cSwitch' but the transition duration i applied only works from left to right.

i tried applying right too but that didn't change anything.

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 >
                            
    <div  state="off" id="neon-switch">
         <div ></div>
    </div>
                        
</div>

CodePudding user response：

You neglected to apply position: absolute in the default state, so left has no effect. left may transition from 50% back to 0%- but it doesn't apply, because the element is not positioned.

Put position: absolute into the rule with the .cSwitch_handle selector instead.