javascript - element.style.display = 'none' 在 firefox 中不起作用，但在 chrome 中有效

Question

我有一个动画按钮托盘，我在某一点上使用了 -moz-transition 和 -webkit-transition 我隐藏按钮，然后在新位置取消隐藏它们。这在 Chrome 中运行良好，但由于某种原因它没有隐藏 Firefox 中的元素(现在忽略 IE，办公室里的另一个人专门研究它，所以他会让它在那里工作可怜的灵魂)。

我想知道它是否与 -moz-transition 有关，如果它的行为方式不同，那么 -webkit-transition 真的是我唯一能想到的。

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

          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 设置 button_one.style.display = 'block'

这是动画的CSS:

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

这是按钮的 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;
        }

这是调用 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 是一个全局变量，用于跟踪按钮在托盘中的位置，如您所见，s 是局部范围，仅用于选择要移动的按钮。

我试图在按钮重新定位之前隐藏按钮的原因是，用户在按钮到达最终位置之前看不到它们的位置。

此外，如果我更改 hide_slide_left 中的超时延迟，那么它在 Firefox 中可以正常工作，但它仍然存在错误(有时按钮只是出现而不是动画，有时它们不会出现)并且它在动画中引入了各种图形滞后实在受不了所以仍在寻求帮助。

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

这是一个 jsFiddle 来演示我在做什么:jsFiddle .

如果您在 Chrome 中查看它，那么当 block 离开屏幕时它们会消失，然后重新出现在另一侧并滑入到位时它工作正常。在 Firefox 中，它们不会消失，它们只是滑过(或滑过)其他元素，有时没有达到应有的程度。我真的很困惑为什么 Firefox 的行为如此不同。

Answer 1

@Neil 部分正确。它不起作用的原因是 Mozilla 实现转换的方式。

然而他说的恰恰相反。应用了转换，未应用的是 display:none。它基本上被 css 中存在转换规则的事实所否决。

解决这个问题的方法(目前，希望 Mozilla 改变他们的实现)是使用多个函数和 2 个不同的 css 类规则。 (这很笨重，但仍然可以比使用 javascript 移动一些东西更简单)。

所以您的第一个类有一个过渡，可以将图 block 移出屏幕。然后它获得一个没有转换规则的新类。然后，您可以使用 javascript 将其位置设置到旋转木马的另一侧，它会立即到达那里而不可见，因为它不再具有过渡属性。最后，您重新应用过渡类，并将其移动到轮播另一侧的最终位置。

效果与 Chrome 中的效果相同，但绝对没有那么优雅。