应用JavaScript类名更改和style.display='；区块'；同时也不起作用

我有以下CSS（3）类：

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

page.className += " VisiblePage";

但是，当我在下一行将“page”元素的“display”设置为“block”时，VisiblePage类的赋值不再导致应用其框阴影和变换：

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

更改这两行的顺序并没有什么区别

有人对此有解释吗

目前，我有一个丑陋的解决方案：

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

但是我想摆脱它。

继stackoverflow和a之后，我得出结论，当CSS 3转换应用于同时设置了CSS“display”属性的元素时，它们不起作用（至少在Chrome中不起作用）。在我的例子中，设置了“page”元素的“display”属性，同时该元素还被分配了一个定义转换的CSS类。因此，过渡不起作用

---

我通过使用“可见性”属性而不是“显示”解决了我的问题。

应该是page.className=“VisiblePage”；（而不是+=，使用=）这是在哪个浏览器中发生的？你能提供一个提琴的例子吗？这听起来很像用户通过CSS3在某些浏览器上制作动画时遇到的问题。我想说的是，它与样式更新有关，这意味着我们对此无能为力：|然而，我可能错了。@hop Jeroen可能正在向一个已经至少有一个类的元素添加一个类（该语法也让我感到困惑，但我非常确定它是允许的）。嗯，这里似乎有用：。也许这过于简单化了。

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