javascript - 同时应用JavaScript className更改和style.display ='block'不起作用

我有以下CSS（3）类：

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

在JavaScript中，我将类分配给“页面”变量中的DOM元素，如下所示：

page.className += " VisiblePage";

但是，当我在下一行将“页面”元素的“显示”设置为“块”时，VisiblePage类的分配不再导致其框阴影和变换被应用：

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

更改两行的顺序没有区别。

有人对此有解释吗？

目前，我有一个可行的丑陋解决方法：

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

但我想摆脱它。

最佳答案

在stackoverflow上的另一个question和一个blog post之后，我得出结论，当CSS 3过渡应用于同时设置了CSS'display'属性的元素时，CSS 3过渡不起作用（至少在Chrome中不起作用） 。在我的情况下，设置了“页面”元素的“显示”属性，同时还为该元素分配了一个定义过渡的CSS类。因此，过渡不起作用。

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