Javascript “我该怎么做？”；反向；第二次单击元素时CSS转换？

我有一个简单的CSS转换/切换开关转换。它切换一个

。当我点击它时，它会点击
类。我想执行第二次转换，当我再次单击它时，它会“反转”效果。但是，很明显，它只是删除了类。请运行我的代码片段以了解我的意思。我如何做到这一点？谢谢


const slider=document.querySelector（“.slider”）
const circle=document.querySelector（“.slider circle”）
slider.addEventListener（'单击'，（e）=>{
circle.classList.toggle（'slider-click'）；
})
滑块{
背景色：hsl（237,63%，64%）；
边界半径：75px；
宽度：34vw；
高度：21vw；
显示器：flex；
调整内容：灵活启动；
调整内容：灵活启动；
}
.滑块：悬停{
不透明度：50%；
光标：指针；
}
.滑块圆{
身高：17.36vw；
宽度：17.36vw；
边界半径：50%；
背景色：#ffffff；
利润率：5%
}
.滑块单击{
转化：translateX（13vw）；
过渡：.2s；
}
/*再次单击时会出现类似的情况*/
.滑块返回{
转换：translateX（-13vw）；
过渡：.2s；
}
设置
转换：.2s在默认元素中，而不是在它接收到活动类之后


//滑块？这更像是一个复选框
const checkbox=document.querySelectorAll（'.checkbox'）；//使用全部！毕竟这是一门课
const checboxToggle=（ev）=>ev.currentTarget.classList.toggle（'is-active'）；
checkbox.forEach（el=>el.addEventListener（'click'，checboxToggle））
.checkbox{
背景色：hsl（237,63%，64%）；
边界半径：21vw；
宽度：34vw；
高度：21vw；
显示器：flex；
调整内容：灵活启动；
调整内容：灵活启动；
光标：指针；
}
.复选框：之前{
内容：“；
身高：17.36vw；
宽度：17.36vw；
边界半径：50%；
背景色：#ffffff；
利润率：5%；
转换：.2s；/*在此处使用它*/
}
.checkbox.处于活动状态：之前{
转化：translateX（13vw）；
}
我想这就是您想要的，您只需在圆圈中添加一个单击的类，它将设置css translateX（13vw），并在再次单击时将其重置为零


const slider=document.querySelector（“.slider”）
const circle=document.querySelector（“.slider circle”）
slider.addEventListener（'单击'，（e）=>{
circle.classList.toggle（'clicked'）；
})
滑块{
背景色：hsl（237,63%，64%）；
边界半径：75px；
宽度：34vw；
高度：21vw；
显示器：flex；
调整内容：灵活启动；
调整内容：灵活启动；
}
.滑块：悬停{
不透明度：50%；
光标：指针；
}
.滑块圆{
身高：17.36vw；
宽度：17.36vw；
边界半径：50%；
背景色：#ffffff；
利润率：5%；
过渡：所有。2放松；
变换：translateX（0）；
}
.点击{
转化：translateX（13vw）；
}


const slider=document.querySelector（“.slider”）
const circle=document.querySelector（“.slider circle”）
设toggled=false
slider.addEventListener（'单击'，（e）=>{
如果（已切换）{
circle.classList.remove（'slider-click'）；
circle.classList.add（'slider-return'）；
切换=假；
}否则{
circle.classList.remove（'slider-return'）；
circle.classList.add（'slider-click'）；
切换为true；
}
})
滑块{
背景色：hsl（237,63%，64%）；
边界半径：75px；
宽度：34vw；
高度：21vw；
显示器：flex；
调整内容：灵活启动；
调整内容：灵活启动；
}
.滑块：悬停{
不透明度：50%；
光标：指针；
}
.滑块圆{
身高：17.36vw；
宽度：17.36vw；
边界半径：50%；
背景色：#ffffff；
利润率：5%
}
.滑块单击{
转化：translateX（13vw）；
过渡：.2s；
}
/*再次单击时会出现类似的情况*/
.滑块返回{
转换：初始；
过渡：.2s；
}
首先使用复选框，然后使用
：before
和
：after
伪类

不需要使用Javascript

有关如何做到这一点的更多信息，请参阅。
不必要地使用两个类的解决方案太糟糕了。@RokoC.Buljan-我直接回答了海报的问题：他们“不必要地使用了两个类”，因此我给出了解决方案，使“不必要地使用了两个类”起作用。我对能够找到CSS问题的解决方案感到相当兴奋！那种短暂的快乐已经消失了，但我想我已经取代了你刚才丢掉的知识。所以谢谢？w3schools现在仍然是最糟糕的学习资源。此外，仅链接的答案不符合此网站的预期格式。