Глюк анимации CSS при обращении анимации через JS на полпути - PullRequest
Новая
       14

Глюк анимации CSS при обращении анимации через JS на полпути

2 голосов
/ 18 мая 2019

У меня проблема с остановкой CSS-анимации на 75% пути, а затем с изменением порядка и продолжением с использованием JS.Если вы запустите приведенный ниже фрагмент кода и увидите, что вы можете легко остановить и повернуть анимацию куба и повернуть ее на 50%. 

var div = document.getElementById('div');

var timer = setTimeout(function() {
  div.classList.add('paused');
}, 1000)

var timer = setTimeout(function() {
  div.classList.add('reverse');
  div.classList.remove('paused');
}, 1700)
@keyframes animation {
  0% {
    margin-left: 0px;
  }
  
  100% {
    margin-left: 200px;
  }
}

#div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: animation 2s linear infinite;
}

.paused {
    animation-play-state: paused !important;
}

.reverse {
    animation-direction: reverse !important;
}
<div id="div"></div>

Но если вы попытаетесь остановить его на 75% и перезапустить в обратном направлении, то анимация будет приостановлена ​​с 25% (фрагмент ниже).

var div = document.getElementById('div');

var timer = setTimeout(function() {
  div.classList.add('paused');
}, 1500)

var timer = setTimeout(function() {
  div.classList.add('reverse');
  div.classList.remove('paused');
}, 1700)

var timer = setTimeout(function() {
  div.classList.add('paused');
}, 2800)
@keyframes animation {
  0% {
    margin-left: 0px;
  }
  
  100% {
    margin-left: 200px;
  }
}

#div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: animation 2s linear infinite;
}

.paused {
    animation-play-state: paused !important;
}

.reverse {
    animation-direction: reverse !important;
}
<div id="div"></div>

Итак, мой вопрос, есть ли способ обойти это?Какое-то свойство CSS.Я знаю, что это не может считаться сбоем, потому что при 75% завершения на реверсе поле должно быть на 25%, даже если оно перемещается по экрану слишком быстро.

...