当第二次单击元素时，如何“反转” CSS 过渡？

Question

我有一个用于切换开关的简单 CSS 转换/转换。当我单击它时，它会切换 .slider-click 类。当我再次单击它时，我想执行第二个“反转”效果的转换。但是，显然它只是删除了类。请运行我的代码 sn-p 以了解我的意思。我如何实现这一目标？谢谢。

      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;，而不是在它接收到active类之后。

// 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

我想这就是你想要的，你只需在圆圈中添加一个单击的类，它将设置 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 3

      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 4

首先使用复选框并使用:before 和:after 伪类。

无需使用 Javascript。

有关如何执行此操作的更多信息，请参阅w3schools。