我有以下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'解决了我的问题。