与CSS的CSS转换没有转换

当我尝试使用纯CSS进行简单转换时，所有工作都正常。
但是，当我尝试调用一个JavaScript函数，当点击一个链接时调用CSS，没有转换。我想淡入灰色层。与CSS的CSS转换没有转换

HTML：

<a href="someImage.jpg" id="test"> 
    <img src="someImage.jpg" alt="" /> 
</a> 
<section id="grey"> 
</section>

JS：

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

CSS：

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

（见http://jsfiddle.net/7zEhx/5/）

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

来源

2013-06-30 YPOC

display: none元素不会转换，并且display: block尚未在您设置其他样式之前踢入。还有可怕的黑客就像这样：

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

但我只是设置width到0，而不是设置display，然后把它放回去在100%。
Updated jsFiddle

来源

2013-06-30 23:37:16 Ryan

为什么这个黑客工作？似乎它只是立即设置不透明度。 – raam86

@ raam86：将'0'传递给'setTimeout'使其等待，直到完成所有同步为止，因为JavaScript是单线程的。 – Ryan

这实际上是一个很好的黑客。 – raam86

与CSS的CSS转换没有转换

回答

相关问题