element.style。display = 'none'不在firefox中工作，而是在chrome中。

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。显示= '块'

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中工作，但它仍然是有bug的(有时，按钮只是出现而不是动画)，它会将各种图形化的延迟引入到我无法忍受的动画中。所以仍然在寻求帮助。

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.

如果你用铬合金来观察它，当方块从屏幕上消失，然后在另一边重新出现，然后滑动到合适的位置时，它就能正常工作了。在Firefox中，它们不会消失，它们只是在其他元素下滑动(或滑过)，有时也不会走得太远。我真的很困惑为什么Firefox的行为如此不同。

4 个解决方案

#1

@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:none that is not applied. It essentially gets overruled by the fact that there is a transition rule in the css.

然而，这与他所说的恰恰相反。转换被应用，它的显示:没有不被应用的。在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改变其实现)的方法是使用多个函数和两个不同的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一样，但绝对没有那么优雅。

#2

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_1和button_2是什么?

#3

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不会应用转换:没有;-你需要以一种不同的方式隐藏你的按钮，也许是通过可见性:隐藏;

#4

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有一些奇怪的行为。