Почему не анимируется добавление класса?

Question

[Maks]

Мой код
HTML:
<div id="block"></div>
CSS:

#block {
    width: 50px;
    height: 50px;
    background: green;
    transition: all 5s;
    margin-bottom: 2px;
}
.move {
    margin-left: 300px;
}

JS:

var block = document.getElementById("block");
block.classList.add("move");

Исходник на JSFiddle: jsfiddle.net/6bfgopvx

При запуске на JSFiddle блок двигается плавно слева направо в течении 5 секунд.
При локальном запуске на Firefox поведение аналогичное.
При локальном запуске на Chrome и Opera блок сразу встает в свое конечное положение без анимации.

Вопрос: как сделать плавную анимацию с добавлением класса, как на JSFiddle, чтобы работала везде?

P.S. автопрефиксер включен

Answer 1

[Антон Мудренок]

<div class="block"></div>

.block {
    width: 50px;
    height: 50px;
    background: green;
    transition: all 5s;
    margin-bottom: 2px;
    margin-left: 0px;
}
.move {
    margin-left: 300px;
}

var block = document.getElementsByClassName("block")[0];
block.classList.add("move");

classList, как и код без префиксов, не везде работает

Comments

[Maks]

Сделал, как вы сказали, не помогло.

[Антон Мудренок]

меняйте в js на эту строку: block.className = block.className + " move";
id на class точно поменяли?)

[Maks]

не работает. На класс точно изменил. Если сделать вот так, то заработает:

var block = document.getElementsByClassName("block")[0];
block.style.marginLeft = 0;
function move() {
block.style.marginLeft = "200px";
}
setTimeout(move,100);

Но это не правильно и не через добавление класса.

[Антон Мудренок]

Maks: ну да, походу оно отрабатывает раньше
Тогда так:
document.getElementsByClassName("block")[0].addEventListener("click", function () {
block.className = block.className + " move";
});

[Maks]

Антон Мудренок: Да, в таком случае работает. Спасибо за решение и разъяснение!

[Антон Мудренок]

Maks: разъяснение вот в чем
$(document).ready(function(){
var block = document.getElementsByClassName("block")[0];
block.className = block.className + " move";
});
если вызывать код после того как страница загрузится, все предсказуемо работает

Answer 2

[Виталий Инчин ☢]

Все работает --> тык, поди присваиваете класс до загрузки страницы, да что еще более вероятно - перед стилями.

Comments

[Maks]

страница не найдена

[Виталий Инчин ☢]

Maks: обновил ссылку

[Maks]

По времени присваивания класс - js код находится в конце страницы после всех элементов

[Maks]

Виталий Инчин: спасибо за решение!

Answer 3

[Михаил]

потому что, вот почему:

-webkit-transition: all 5s;
     -moz-transition: all 5s;
     -o-transition:  all 5s;
     transition:  all 5s;

Comments

[Maks]

Нет, проблема не в этом. Забыл указать, что включен автопрефиксер.