使用javascript的css转换没有转换

当我尝试用纯CSS进行简单转换时，一切都很好。
但是，当我试图调用javascript函数，该函数在单击链接时修改CSS时，没有转换。我想淡入灰色的一层

HTML:

CSS:

（见附件）

---

我使用的是FF22，有人知道任何解决方案吗？

显示：无

元素不会转换，并且在设置其他样式之前，

显示：块

没有启动。有这样可怕的黑客：

setTimeout(function() {
    grey.style.opacity = "1";
}, 0);

但是我只是将

width

设置为

0

而不是设置

display

，然后将其重新设置为

100%

---

为什么这项技术有效？似乎它只是毫无延迟地设置了不透明度。@raam86:将

0

传递到

setTimeout

会使它等待所有同步操作完成，因为JavaScript是单线程的。这实际上是一个很好的技巧。谢谢你的回答。使用宽度是一个非常简单的解决方案，但我就是想不出来。然而，我认为在我的情况下，更容易使用你的“黑客”。我发现setTimeout（…，0）并不总是有效的，特别是当我更改一个包含许多其他元素的元素的显示时。如果我使用更高的超时时间，它会更可靠，但仍然不令人满意。

var grey = document.getElementById("grey");
var link = document.getElementById("test");
link.onclick = function () {
    grey.style.display = "block";
    grey.style.opacity = "1";
    return false;
};

section {
    display:none;
    size and position...
    opacity: 0;
    background-color: rgba(0,0,0,0.5);
    transition: opacity 1s .5s;
}

setTimeout(function() {
    grey.style.opacity = "1";
}, 0);