关于javascript：element.style.display =’none’在Firefox中不起作用，但在chrome中

element.style.display = 'none' not working in firefox but is in chrome

我有一个动画按钮托盘，有一次我正在使用-moz-transition和-webkit-transition，我隐藏了按钮，然后将它们取消隐藏在新的位置。这在Chrome中工作正常，但由于某种原因，它没有在Firefox中隐藏元素(现在忽略IE，办公室里的另一个人专门研究这个问题，因此他将使它在可怜的灵魂中工作)。

我想知道它是否与-moz-transition有关，并且其行为方式是否不同，那么-webkit-transition确实是我唯一能想到的。

这是隐藏按钮的函数(右边有一个语法完全相同的按钮)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Show_slide_left设置button_one.style.display = \\'block \\'

这是动画的css：

1
2
3
4
5

.buttons li {
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
z-index: 0;
}

这是按钮的css(托盘中还有4个按钮，总共5个按钮)：

1
2
3
4
5
6
7
8
9
10

#button0{
background: url(images/some_background_image.png) no-repeat;
height: 117px;
float: left;
left:50px;
width: 134px;
display: block;
cursor: pointer;
position: absolute;
}

这是调用hide_slide_left的函数的一部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

cc是一个全局变量，用于跟踪按钮在托盘中的位置，如您所见，s是局部作用域，仅用于选择要移动的按钮。

我要在重新放置按钮之前先隐藏它们的原因是，以便用户在最终位置之前看不到要去的地方。

此外，如果我在hide_slide_left中更改超时延迟，则它可以在Firefox中运行，但仍然存在问题(有时按钮只是出现而不是动画，有时却不显示)，并且在动画中引入了各种图形滞后我真的不能容忍因此仍在寻求帮助。

任何帮助将不胜感激，但我仅使用JavaScript而不是jQuery，谢谢。

这里是一个jsFiddle来演示我在做什么：jsFiddle。

如果您在Chrome中查看它，则当块从屏幕上消失时，它们会正常工作，然后消失，然后重新出现在另一侧并滑入到位。在Firefox中，它们不会消失，只是在其他元素下面(或上方)滑动，有时甚至不会达到应有的程度。我对为什么Firefox表现得如此不同感到非常困惑。