第二次单击该元素时如何 "reverse" CSS 过渡？

Question

我有一个简单的 CSS transform/transition 用于拨动开关。当我点击它时，它会切换 .slider-click class。我想执行第二次转换，当我再次单击它时 "reverses" 效果。但是，显然它只是删除了 class。请运行我的代码片段看看我的意思。我如何实现这一目标？谢谢。

      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;，一旦收到activeclass.

// 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 因为你使用 classes！并且 .forEach() 所有检索到的元素。
您不需要任何内部元素。使用 :before 或 :after 伪
将所需的 class 直接添加到主 .checkbox 元素。

Answer 2

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

第二次单击该元素时如何 "reverse" CSS 过渡？

How do I "reverse" a CSS transition when the element is clicked on a second time?

html

javascript

css

animation

css-transitions