Firefox过渡尚未呈现的项目

Question

我使用display: none;对用户隐藏了一些元素，并显示了过渡效果。这是一个简单的着色器来演示问题：

HTML：

<div id="list-shader"></div>

CSS：

#list-shader{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgb(30, 30, 30);
    transition: background-color 5s;
    -moz-transition: background-color 5s;
    display: none;
}

JS：

listAdd.onclick = e => {
    listShader.style.display = "block";
    listShader.style.backgroundColor = "rgba(80, 80, 80, .4)";
}

这与Chrome上的预期效果完全相同（该元素的淡入速度非常慢），但是在Firefox中，着色器立即显示为rgba(80, 80, 80, .4)。我将其范围缩小到这个理论：

没有显示的元素没有计算所得的属性可从其过渡，因此，即使它们确实没有被赋予默认属性，其行为也是如此。也许是他们新的CSS引擎中的错误？令人怀疑。

有人知道解决方法或解决方案吗？设置显示后，我已经在行上尝试了requestAnimationFrame，但没有成功。