javascript element.style.display = 'none' 在 Firefox 中不起作用，但在 chrome 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7288977/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
element.style.display = 'none' not working in firefox but is in chrome
提问by Ryan
I have this animated button tray that I am using -moz-transition and -webkit-transition on at one point I hide the buttons and then un-hide them in a new position. This is working fine in Chrome but for some reason its not hiding the elements in Firefox (ignoring IE for now another guy in the office specializes in that so he will make it work there poor soul).
我有这个动画按钮托盘，我曾经使用 -moz-transition 和 -webkit-transition 来隐藏按钮，然后在新位置取消隐藏它们。这在 Chrome 中运行良好，但由于某种原因，它没有隐藏 Firefox 中的元素（现在忽略 IE，办公室里的另一个人专门研究这个，所以他会让它在那里工作，可怜的灵魂）。
I am wondering if it has something to do with the -moz-transition and if it behaves in a different manner then the -webkit-transition really the only thing I can think of.
我想知道它是否与 -moz-transition 有关，如果它的行为方式不同，那么 -webkit-transition 真的是我唯一能想到的。
Here is the function hiding the buttons(there is one with the exact same syntax for the right side):
这是隐藏按钮的功能（右侧有一个完全相同的语法）：
function hide_slide_left(button_one, button_two){
if(button_two == ''){
button_one.style.display = 'none';
button_one.style.left = -120 + 'px';
var t = setTimeout(function(){show_slide_left(button_one,button_two)}, 10);
}else{
button_one.style.display = 'none';
button_two.style.display = 'none';
button_one.style.left = -120 + 'px';
button_two.style.left = -230 + 'px';
var t = setTimeout(function(){show_slide_left(button_one,button_two)}, 10);
}
}
Show_slide_left sets the button_one.style.display = 'block'
Show_slide_left 设置 button_one.style.display = 'block'
Here is the css for the animation:
这是动画的css：
.buttons li {
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
z-index: 0;
}
and here is the css for the buttons(there are 4 more of them 5 total in the tray):
这是按钮的 css（托盘中还有 4 个，总共 5 个）：
#button0{
background: url(images/some_background_image.png) no-repeat;
height: 117px;
float: left;
left:50px;
width: 134px;
display: block;
cursor: pointer;
position: absolute;
}
Here is part of the function that calls hide_slide_left:
这是调用 hide_slide_left 的函数的一部分：
var button_temp1 = '';
var button_temp2 = '';
var s = '';
s = ((cc + 4)%5);
cc = ((cc-number + 5)%5);
if(number == 1){
button_temp1 = document.getElementById("button"+ s);
var t= setTimeout(function(){hide_slide_left(button_temp1, button_temp2)},500);
} else {
button_temp1 = document.getElementById("button"+ s);
s = ((s+4)%5);
button_temp2 = document.getElementById("button"+ s);
// button_temp2.style.left = 50 + 'px';
var t= setTimeout(function(){hide_slide_left(button_temp1, button_temp2)},500);
// button_temp1.style.left = 194 + 'px';
}
cc is a global variable used to keep track of where the buttons are in the tray and s as you can see is local scope just used to select the buttons to be moved.
cc 是一个全局变量，用于跟踪按钮在托盘中的位置，而 s 如您所见是仅用于选择要移动的按钮的局部范围。
The reason I am trying to hide the buttons before they are re-positioned is so that the user does not see where then go until they are in their final position.
我试图在按钮重新定位之前隐藏它们的原因是，用户在它们处于最终位置之前看不到然后去哪里。
Also if I change the timeout delay in hide_slide_left then it sorta works in Firefox but it still is buggy (sometimes the buttons just appear instead of animating sometimes they don't) and it introduces all sorts of graphical lag into the animation that I can't really tolerate. So still looking for help.
此外，如果我更改 hide_slide_left 中的超时延迟，那么它在 Firefox 中可以正常工作，但它仍然有问题（有时按钮只是出现而不是动画，有时它们不会）并且它会在我可以的动画中引入各种图形延迟真的可以忍受。所以还在寻求帮助。
Any help would be appreciated but I am only using JavaScript not jQuery thanks.
任何帮助将不胜感激，但我只使用 JavaScript 而不是 jQuery，谢谢。
Here is a jsFiddle to demonstrate what I am doing: jsFiddle.
这是一个 jsFiddle 来演示我在做什么：jsFiddle。
If you look at it in Chrome then it works fine when the blocks go off screen they disappear and then reappear on the other side and slide into place. In Firefox they don't disappear they just slide under(or over) the other elements and sometimes don't go as far as they should. I am really confused as to why Firefox is behaving so much differently.
如果您在 Chrome 中查看它，那么当这些块离开屏幕时它们会消失，然后重新出现在另一侧并滑入到位时，它可以正常工作。在 Firefox 中，它们不会消失，它们只是在其他元素下方（或上方）滑动，有时不会走得尽可能远。我真的很困惑为什么 Firefox 的行为如此不同。
采纳答案by Ryan
@Neil is partly correct. The reason its not working is because of the way that Mozilla has implemented transitions.
@Neil 部分正确。它不工作的原因是因为 Mozilla 实现转换的方式。
However its the opposite of what he said. The transition is applied, its the display:nonethat is not applied. It essentially gets overruled by the fact that there is a transition rule in the css.
然而，这与他所说的相反。应用了过渡，它的display:none未应用。它基本上被 css 中存在转换规则这一事实所推翻。
The way around this (currently, hopefully Mozilla changes their implementation) is to use multiple functions and 2 different css class rules. (which is bulky but still can be simpler then moving something with javascript).
解决这个问题的方法（目前，希望 Mozilla 改变他们的实现）是使用多个函数和 2 个不同的 css 类规则。（这很笨重，但仍然可以比使用 javascript 移动一些东西更简单）。
So your first class has a transition on it that moves the tile off screen. It then gets a new class that has no transition rule. you can then set its position with javascript to the opposite side of the carousel and it will go there instantly without being visible because it no longer has a transition property. Finally you re-apply the transition class, and move it to its final position on the other side of the carousel.
所以你的第一堂课有一个过渡，将瓷砖移出屏幕。然后它得到一个没有转换规则的新类。然后，您可以使用 javascript 将其位置设置到轮播的另一侧，它会立即到达那里而不可见，因为它不再具有过渡属性。最后，您重新应用过渡类，并将其移动到转盘另一侧的最终位置。
The effect is the same as achieved in Chrome, but definitely not as elegant.
效果与 Chrome 中实现的效果相同，但绝对没有那么优雅。
回答by goatslacker
The only thing missing in your code is a closing brace for the function, but I'm sure you have that in your code since it's working on Chrome.
您的代码中唯一缺少的是该函数的右大括号，但我确定您的代码中有它，因为它可以在 Chrome 上运行。
It's strange, works on my machine in both FF and Chrome -- how are you calling hide_slide_left and what is button_one and button_two when you call it?
很奇怪，在我的 FF 和 Chrome 机器上都可以使用——你如何调用 hide_slide_left 以及调用时 button_one 和 button_two 是什么？
回答by Neil
I don't think Firefox applies transitions when you use a style of display: none;- you'll need to hide your button in a different way, perhaps with visibility: hidden;.
我认为 Firefox 在您使用的样式时不会应用转换display: none;- 您需要以不同的方式隐藏您的按钮，也许使用visibility: hidden;.
回答by YeppThat'sMe
try this
试试这个
setAttribute( 'style', 'display:none' )
instead of
代替
style.display = 'none';
i cant test it yet but i think there some strange behaviors in FF.
我还不能测试它，但我认为 FF 中有一些奇怪的行为。
