element.style.display ='none'在firefox中不工作，但在铬 [英] element.style.display = 'none' not working in firefox but is in chrome

问题描述

我有这个动画按钮托盘，我正在使用-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 $ show_slide_left设置button_one.style.display ='块'
 
 
 
以下是动画的CSS： 
 
 
  .buttons li {
 -webkit-transition：全部.5s进出; 
 -moz-transition：全部.5s缓出来; 
 z-index：0; 
 
 
 
 $ b $ p 
 $ b 
这里是按钮的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'; 
 
 
 
 
 
 $是一个全局变量，用于跟踪按钮在哪里托盘和s，你可以看到本地范围只是用来选择要移动的按钮。 
 
 
 
原因是我想在重新定位按钮之前隐藏按钮，以至于用户看不到它们的位置，直到它们处于最终位置。 / p> 
 
 
另外，如果我更改hide_slide_left中的超时延迟，那么它在Firefox中起作用，但它仍然是越野车（有时按钮只是出现，而不是动画有时他们不）它将各种图形滞后引入我无法真正容忍的动画中。所以仍然在寻求帮助。
 
 
任何帮助将不胜感激，但我只使用JavaScript而不是jQuery谢谢。
 
 
 
这是一个jsFiddle来演示我在做什么： jsFiddle 。
 
 
 
如果您在Chrome浏览器中查看，那么在屏幕消失后屏幕消失，然后再次出现在另一侧并滑入到位时，屏幕可以正常工作。在Firefox中，它们不会消失，它们只会在其他元素之下（或者在其他元素之下）滑动，有时甚至不会达到应有的程度。我真的很困惑，为什么火狐行为如此不同。
        @Neil是部分正确的。它不工作的原因是因为Mozilla已经实现了转换。
 
 
然而，与他所说的相反。应用了转换，它的 display：none 没有被应用。它基本上被css中有一个转换规则的事实推翻了。  
 
 
解决方法是使用多个函数和2个不同的css类规则（目前希望Mozilla更改它们的实现）。 （这是庞大的，但仍然可以更简单，然后移动的东西与JavaScript）。
 
 
所以你的第一类有一个过渡，移动瓷砖屏幕。然后得到一个没有过渡规则的新类。然后你可以使用javascript将其位置设置为旋转木马的另一侧，它将立即到达那里而不会被看见，因为它不再具有过渡属性。最后，你重新申请过渡课，并将其移动到旋转木马另一侧的最终位置。  
 
 
效果与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). 

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.

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'

Here is the css for the animation: 
        .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):
        #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:
             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. 

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.

Any help would be appreciated but I am only using JavaScript not jQuery thanks.

Here is a jsFiddle to demonstrate what I am doing: 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.
解决方案
@Neil is partly correct. The reason its not working is because of the way that Mozilla has implemented transitions.

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. 

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).

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. 

The effect is the same as achieved in Chrome, but definitely not as elegant. 

                        
这篇关于element.style.display ='none'在firefox中不工作，但在铬的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！