Применение изменения JavaScript className и style.display = 'block' одновременно не работает

Question

У меня есть следующий класс CSS (3):

.VisiblePage
{
    -webkit-box-shadow: none;
    -webkit-transform: rotate(0deg);
}

В JavaScript я назначаю класс элементу DOM в переменной 'page' следующим образом:

page.className += " VisiblePage";

Однако, когда я установил «display» элемента «page» на «block» на следующей строке, присвоение класса VisiblePage больше не приводит к применению его box-shadow и transform:

page.className += " VisiblePage";
page.style.display = "block";

Изменение порядка двух строк не имеет значения.

У кого-нибудь есть объяснение этому?

В настоящее время у меня есть уродливый обходной путь, который работает:

setTimeout(function () {
    page.className += " VisiblePage";
}, 0);
page.style.display = "block";

но я бы хотел избавиться от этого.

Answer 1

После еще одного вопроса о stackoverflow и сообщения в блоге Я заключаю, что переходы CSS 3 не работают (по крайней мере, в Chrome), когда они применяются к элементам, которые такжеCSS свойство display (в то же время).В моем случае свойство 'display' элемента 'page' установлено, в то время как этому элементу также назначается класс CSS, который определяет переход.Следовательно, переход не работает.

Я решил свою проблему, используя свойство «видимость» вместо «отображение».