Question

我正在尝试创建我的第一个开关。

我有2个关键帧动画。一个使开关向右移动，另一个使开关向左移动。

现在，对于Javascript，我认为我需要一个if语句，因为我需要Javascript知道当开关处于特定位置时该怎么办？

问题是我不太确定将if表达式放在什么位置。

我希望我可以将其用作if表达式以返回布尔值true：

sliderCircle[0].style.transform = 'translate(0px, -20px)'

HTML：

<div class="row">
  <div class="slider">
    <div class="slider-back"></div>
    <div class="slider-circle"></div>
  </div>
</div>

CSS：

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 55vw;
  height: auto;
  padding: 0 1vw;
  border-top: 2px solid rgba(255 ,255, 255, 0.4);
  transition: 1s;
}

.slider {
  height: 12px;
  margin-top: 2vw;
  cursor: pointer;
}

.slider-back {
  width: 45px;
  height: 12px;
  border-radius: 15px;
  background: -webkit-linear-gradient(100deg, rgba(172,174,203,0.6) 0%, rgba(255,255,255,0.6) 80%);
}

.slider-circle {
  width: 28px;
  height: 28px;
  border-radius: 25px;
  background: -webkit-linear-gradient(100deg, rgba(172,174,203,1) 0%, rgba(255,255,255,1) 80%);
  transform: translate(0, -20px);
}

.slide-anim-r {
  animation-name: slider-r;
  animation-duration: 0.5s;
}

.slide-anim-l {
  animation-name: slider-l;
  animation-duration: 0.5s;
}

@keyframes slider-r {
  0% {
    transform: translate(0, -20px);
  }
  100% {
    transform: translate(22px, -20px);
  }
}

@keyframes slider-l {
  0% {
    transform: translate(22px, -20px);
  }
  100% {
    transform: translate(0, -20px);
  }
}

Javascript：

const slider = document.getElementsByClassName('slider');  // slider toggle
const sliderCircle = document.getElementsByClassName('slider-circle');

slider[0].addEventListener('click', () => {
  if (sliderCircle[0].style.transform = 'translate(0px, -20px)') {
    sliderCircle[0].classList.add('slide-anim-r');
    sliderCircle[0].style.transform = 'translate(22px, -20px)';
  } else {
    sliderCircle[0].classList.add('slide-anim-l');
    sliderCircle[0].style.transform = 'translate(0px, -20px)';
  }
});

此刻，我可以单击开关，它会设置为正确的动画，但是我无法单击它以将其再次移回。

如果有人可以建议一种更好的方法，请告诉我！

谢谢！

Answer 1

由于您只有两种状态，并且想要从一种状态转到另一种状态，因此只需使用过渡而不是动画即可。

这很简单，您只需要一个附加的类即可定义第二种状态。（第一个状态在滑块的初始设置中）

elseif

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

body {
  background: #bada55
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 55vw;
  padding: 0 1vw;
  border-top: 2px solid rgba(255, 255, 255, 0.4);
  transition: 1s;
}

.slider {
  height: 12px;
  margin-top: 2vw;
  cursor: pointer;
}

.slider-back {
  width: 45px;
  height: 12px;
  border-radius: 15px;
  background: linear-gradient(100deg, rgba(172, 174, 203, 0.6) 0%, rgba(255, 255, 255, 0.6) 80%);
}

.slider-circle {
  width: 28px;
  height: 28px;
  border-radius: 25px;
  background: linear-gradient(100deg, rgba(172, 174, 203, 1) 0%, rgba(255, 255, 255, 1) 80%);
  transition-duration: 0.5s;
  transform: translate(0, -20px);
}

.slider-circle.slider-checked {
  transform: translate(22px, -20px);
}

如何为当前转换编写if表达式：translate（）值？

1 个答案: