[英]css transition with javascript has no transition
when I try to make a simple transition with pure CSS all works fine. 当我尝试使用纯CSS进行简单的转换时,一切正常。
But when I try to call a javascript-function which modiefies the CSS when clicked on a link, there is no transition. 但是当我尝试调用一个javascript函数时,在点击链接时修改了CSS,没有转换。 I want to fade in a grey layer.
我想淡入灰色层。
HTML: HTML:
<a href="someImage.jpg" id="test">
<img src="someImage.jpg" alt="" />
</a>
<section id="grey">
</section>
JS: 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: CSS:
section {
display:none;
size and position...
opacity: 0;
background-color: rgba(0,0,0,0.5);
transition: opacity 1s .5s;
}
(see http://jsfiddle.net/7zEhx/5/ ) (见http://jsfiddle.net/7zEhx/5/ )
I'm using FF22, does anyone know any solutions? 我正在使用FF22,有没有人知道任何解决方案?
display: none
elements don't transition, and the display: block
hasn't kicked in before you set the other style. display: none
元素不转换,并且display: block
在设置其他样式之前没有启动。 There are horrible hacks like this: 有这样可怕的黑客:
setTimeout(function() {
grey.style.opacity = "1";
}, 0);
But I'd just set width
to 0
instead of setting display
and then put it back at 100%
. 但我只是将
width
设置为0
而不是设置display
,然后将其设置为100%
。
Updated jsFiddle 更新了jsFiddle
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.