如何在第二次单击元素时“反转”CSS 转换？

Question

我有一个简单的CSS转换/转换切换开关。当我点击一个类时，它会切换它。我想执行第二次转换，当我再次单击它时，它会“反转”效果。但是，显然它只是删除了类。请运行我的代码片段，看看我的意思。如何实现此目的？谢谢。.slider-click      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

首先使用复选框，然后使用和伪类。:before:after

不需要使用Javascript。

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

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

      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>