Другие решения хороши, но я хотел предложить альтернативу и объяснить, что происходит.
Причина, по которой он работает не так, как ожидалось в вашем примере, заключается в том, что все свойства CSS изменены, а затем событие перекомпоновки браузера запускается, и переход начинается. Другими словами, для свойства transition установлено значение none, затем свойство left изменяется, затем свойство transition снова изменяется на left 1s.
После обновления всех свойств стиля запускается событие перекомпоновки браузера, перерисовывается CSS, а затем начинается переход:
element.style.transition = "none";
element.style.left = px + "px";
element.style.transition = "left 1s";
// The transition starts after all the CSS has been modified and a reflow has been trigged.
Это сделано по нескольким причинам.
Основная причина - производительность. Вместо того, чтобы перерисовывать каждый элемент после изменения одного свойства CSS, он гораздо эффективнее изменять все свойства и иметь одно событие перерисовки. Кроме того, если вы переносите несколько свойств, вы ожидаете, что каждое свойство будет изменено до перехода элемента (что именно и происходит).
Если вам нужна чистая альтернатива, которая не включает тайм-аутов / задержек или принудительных перекомпоновок, вы можете просто установить для свойства transitionDuration значение 0s перед установкой значения, а затем удалить этот встроенный стиль при переходе элемента.
Например:
var element = document.getElementById("theElement");
function setX(px) {
element.style.transitionDuration = '0s';
element.style.left = px + "px";
}
function animateX(px) {
element.style.transitionDuration = '';
element.style.left = px + "px";
}
#theElement {
position: relative;
width: 100px;
height: 100px;
border: 2px solid;
left: 200px;
transition: left 1s;
}
<div id="theElement"></div>
<button onclick="animateX(100)">Transition 100</button>
<button onclick="animateX(300)">Transition 300</button>
<button onclick="setX(0)">Set 0</button>
<button onclick="setX(50)">Set 50</button>
Точно так же вы также можете переключить класс элемента перед переходом или установкой значения:
var element = document.getElementById("theElement");
function setX(px) {
element.classList.remove('transition');
element.style.left = px + "px";
}
function animateX(px) {
element.classList.add('transition');
element.style.left = px + "px";
}
#theElement {
position: relative;
width: 100px;
height: 100px;
border: 2px solid;
left: 200px;
}
#theElement.transition {
transition: left 1s;
}
<div id="theElement"></div>
<button onclick="animateX(100)">Transition 100</button>
<button onclick="animateX(300)">Transition 300</button>
<button onclick="setX(0)">Set 0</button>
<button onclick="setX(50)">Set 50</button>
Приведенный выше фрагмент работает, но также стоит отметить, что вы можете прослушать событие transitionend и удалить класс по окончании перехода:
Например:
function animateX(px) {
element.classList.add('transition');
element.style.left = px + "px";
element.addEventListener('transitionend', callback);
function callback() {
this.classList.remove('transition');
this.removeEventListener('transitionend', callback);
}
}
person
Josh Crozier
schedule
11.01.2016
