同时应用JavaScript className change和style.display ='block'不起作用

Question

我有以下CSS（3）类：

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

在JavaScript中，我将类分配给'page'变量中的DOM元素，如下所示：

page.className += " VisiblePage";

但是，当我在下一行将'page'元素的'display'设置为'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上的另一个question和一个blog post我得出结论，当CSS 3转换应用于也具有CSS'display'属性的元素时，它们不起作用（至少不在Chrome中）设置（同时）。在我的例子中，设置'page'元素的'display'属性，同时为该元素分配一个定义转换的CSS类。因此，过渡不起作用。

我通过使用'visibility'属性而不是'display'解决了我的问题。