如何在元素第二次被点击时 "反转 "CSS转换？

Question

我有一个简单的CSS转换过渡，用于切换开关。它可以切换一个 .slider-click 类，当我点击它的时候。我想执行第二个过渡，当我再次点击它时，"逆转 "效果。但是，很明显它只是删除了这个类。请运行我的代码片段，看看我的意思。我如何实现这个目标？谢谢，我有一个简单的CSS transformtransaction类。

      const slider = document.querySelector('.slider')
      const circle = document.querySelector('.slider-circle')
      
      slider.addEventListener('click', (e)=>{
        circle.classList.toggle('slider-click');
      })

.slider {
    background-color: hsl(237, 63%, 64%);
    border-radius: 75px;
    width: 34vw;
    height: 21vw;
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
}
.slider:hover {
    opacity: 50%;
    cursor: pointer;
}
.slider-circle {
    height: 17.36vw;
    width: 17.36vw;
    border-radius: 50%;
    background-color: #ffffff;
    margin: 5%
}

.slider-click {
    transform: translateX(13vw);
    transition: .2s;
}

/* Something like this when clicked again */
.slider-return {
    transform: translateX(-13vw);
    transition: .2s;
}

          <div class="slider-content">
            <div class="slider">
                <div class="slider-circle"></div>
            </div>
          </div>

Answer 1

设置 transition: .2s; 内，而不是一旦收到了 积极 类。

// slider? It's more kindof a checkbox
const checkbox = document.querySelectorAll('.checkbox'); // use all! It's a class after all
const checboxToggle = (ev) => ev.currentTarget.classList.toggle('is-active');
checkbox.forEach(el => el.addEventListener('click', checboxToggle));

.checkbox {
  background-color: hsl(237, 63%, 64%);
  border-radius: 21vw;
  width: 34vw;
  height: 21vw;
  display: flex;
  justify-content: flex-start;
  align-content: flex-start;
  cursor: pointer;
}

.checkbox:before {
  content: "";
  height: 17.36vw;
  width: 17.36vw;
  border-radius: 50%;
  background-color: #ffffff;
  margin: 5%;
  transition: .2s; /* USE IT HERE! */
}

.checkbox.is-active:before {
  transform: translateX(13vw);
}

<div class="checkbox"></div>

此外，。

• 使用正确的措辞。没什么好说的 幻灯片. 它更像是一个复选框。
• 使用 querySelectorAll 因为你用的是班级! 而且 .forEach() 所有检索到的元素。
• 你不需要任何内部元素。使用 :before 或 :after 假的
• 将所需的类直接添加到主 .checkbox 元素。

Answer 2

      const slider = document.querySelector('.slider')
      const circle = document.querySelector('.slider-circle')
      let toggled = false
      slider.addEventListener('click', (e)=>{
        if(toggled) {
          circle.classList.remove('slider-click');
          circle.classList.add('slider-return');
          toggled = false;
        } else {
          circle.classList.remove('slider-return');
          circle.classList.add('slider-click');
          toggled = true;
        }
      })

.slider {
    background-color: hsl(237, 63%, 64%);
    border-radius: 75px;
    width: 34vw;
    height: 21vw;
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
}
.slider:hover {
    opacity: 50%;
    cursor: pointer;
}
.slider-circle {
    height: 17.36vw;
    width: 17.36vw;
    border-radius: 50%;
    background-color: #ffffff;
    margin: 5%
}

.slider-click {
    transform: translateX(13vw);
    transition: .2s;
}

/* Something like this when clicked again */
.slider-return {
    transform: initial;
    transition: .2s;
}

          <div class="slider-content">
            <div class="slider">
                <div class="slider-circle"></div>
            </div>
          </div>

Answer 3

我想这就是你想要的吧，你只要在圆圈上添加一个点击的类，它会设置css translateX(13vw)，再次点击时将其重置为零。

const slider = document.querySelector('.slider')
const circle = document.querySelector('.slider-circle')

slider.addEventListener('click', (e)=>{
  circle.classList.toggle('clicked');
})

.slider {
    background-color: hsl(237, 63%, 64%);
    border-radius: 75px;
    width: 34vw;
    height: 21vw;
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
}
.slider:hover {
    opacity: 50%;
    cursor: pointer;
}
.slider-circle {
    height: 17.36vw;
    width: 17.36vw;
    border-radius: 50%;
    background-color: #ffffff;
    margin: 5%;
    transition: all .2s ease-out;
    transform: translateX(0);
}

.clicked {
    transform: translateX(13vw);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider-content">
  <div class="slider">
      <div class="slider-circle"></div>
  </div>
</div>

Answer 4

先用一个复选框，然后用 :before 和 :after 伪类。

不需要使用Javascript。

请看 w3schools 以获得更多关于如何做到这一点的信息。