Как мне написать выражение if для текущего значения transform: translate ()? - PullRequest
Новая
       11

Как мне написать выражение if для текущего значения transform: translate ()?

0 голосов
/ 23 марта 2019

Я пытаюсь создать свой первый переключатель.

У меня есть 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)';
  }
});

В данный момент я могу нажать наПереключатель и он оживляет вправо, но потом я не могу щелкнуть по нему, чтобы переместить его снова.

Если кто-нибудь может посоветовать лучший способ сделать это, пожалуйста, дайте мне знать!

Спасибо!

1 Ответ

1 голос
/ 23 марта 2019

Поскольку у вас есть только два состояния, и вы хотите перейти от одного к другому, просто используйте переход вместо анимации.

Это очень просто, и вам нужен только один дополнительный класс для определениявторое состояние.( первое состояние находится в начальной настройке ползунка ) 

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);
}
<div class="row">
  <div class="slider">
    <div class="slider-back"></div>
    <div class="slider-circle"></div>
  </div>
</div>
<div class="row">
  <div class="slider">
    <div class="slider-back"></div>
    <div class="slider-circle"></div>
  </div>
</div>
<div class="row">
  <div class="slider">
    <div class="slider-back"></div>
    <div class="slider-circle"></div>
  </div>
</div>
...