CSS переход не работает, когда javascript добавляет свойства непрерывно - PullRequest
Новая
       21

CSS переход не работает, когда javascript добавляет свойства непрерывно

0 голосов
/ 18 ноября 2018

Ниже приведена упрощенная версия проблемы, с которой я столкнулся на своем веб-сайте. 

function move(){
  document.getElementById("box").style.transition = "0s";
  document.getElementById("box").style.top = "100px";
  document.getElementById("box").style.transition = "2s";
  document.getElementById("box").style.top = "0px";
}
#box{
  width:100px;
  height:100px;
  background:red;
  position:relative;
  top:0px;
}
<div id="box" onclick="move()"></div>

Я хочу, чтобы коробка мгновенно спрыгнула вниз, а затем медленно вернулась в исходное положение. Я проверил каждую из четырех строк кода внутри move() отдельно, и они отлично работают. Я просто не могу заставить их бежать за один раз.

Что я делаю не так?

Ответы [ 2 ]

0 голосов
/ 18 ноября 2018

Вместо того, чтобы полагаться на переходы, было бы лучше использовать @keyframes и animation, чтобы вам не приходилось использовать грязные приемы, такие как изменение длительности перехода от 0 до фактического значения в середине анимации, чтобы достичьПрыгать.Ниже приведен пример, который использует функции @keyframes css: 

function move(){
  document.getElementById("box").style.animation = "movement 2s";
}
#box{
  width:100px;
  height:100px;
  background:red;
  position:relative;
  top:0px;
}
@keyframes movement {
    from {top: 100px;}
    to {top: 0px;}
}
<div id="box" onclick="move()"></div>
0 голосов
/ 18 ноября 2018

Кажется, что код должен задержаться перед назначением нового свойства, которое заставляет браузер обрабатывать запрос. Поэтому вам нужно использовать setTimeout() для решения этой проблемы. 

function move(){
  document.getElementById("box").style.transition = "0s";
  document.getElementById("box").style.top = "100px";
  setTimeout(function(){
    document.getElementById("box").style.transition = "2s";
    document.getElementById("box").style.top = "0px";
  }, 10);
}
#box{
  width:100px;
  height:100px;
  background:red;
  position:relative;
  top:0px;
}
<div id="box" onclick="move()"></div>
...