Как работает данный код?

Question

[wakenby]

function setPosition(element) {
  const tempTime = getRandomInt(timeTransitionMin, timeTransitionMax);

  element.style.transition = tempTime + "ms all";
  element.style.transform = 'translateX(' + getRandomInt(-animated.getBoundingClientRect().width / size, animated.getBoundingClientRect().width / size) + 'px) translateY(' + getRandomInt(-animated.getBoundingClientRect().height / size, animated.getBoundingClientRect().height / size) + 'px)';
  element.style.transition = tempTime / 2 + "ms all";
}

Правильно ли я понимаю что данная строчка: element.style.transition = tempTime / 2 + "ms all затирает предыдущую: element.style.transition = tempTime + "ms all".

И если удалить element.style.transition = tempTime + "ms all" то ничего не поменяется, ведь она и не работает так как element.style.transition = tempTime / 2 + "ms all" моментально ставиться в стили?

Answer 1

[WbICHA]

Всё верно, однако если сделать так:

element.style.transition = tempTime + "ms all";
element.style.transform = 'translateX(' + getRandomInt(-animated.getBoundingClientRect().width / size, animated.getBoundingClientRect().width / size) + 'px) translateY(' + getRandomInt(-animated.getBoundingClientRect().height / size, animated.getBoundingClientRect().height / size) + 'px)';
setTimeout(() => { element.style.transition = tempTime / 2 + "ms all"; }, 0)

То трансформ успеет начать работать с первым значением транзишена.