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个以上）：

        #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是一个全局变量，用于跟踪按钮在托盘中的位置，如您所见，本地示波器仅用于选择要移动的按钮。

我试图在重新定位按钮之前隐藏按钮的原因是，在用户处于最终位置之前，用户不会看到其他位置。

此外，如果我更改了hide_slide_left中的超时延迟，那么它可以在Firefox中运行，但它仍然是错误的（有时按钮只是出现而不是动画有时它们没有）并且它在动画中引入了各种图形延迟我真的不能容忍。所以仍在寻求帮助。

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

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

如果你在Chrome中查看它，那么当屏幕离开屏幕时它会正常工作它们会消失，然后再次出现在另一侧并滑入到位。在Firefox中，它们不会消失，只是在其他元素的下方（或上方）滑动，有时不会达到应有的程度。我真的很困惑为什么Firefox表现得如此不同。

Answer 1

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

然而，与他所说的相反。应用转换，其中未应用display:none。它基本上被css中存在转换规则的事实所推翻。

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

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

效果与Chrome相同，但绝对不如优雅。

Answer 2

你的代码中唯一缺少的是该函数的右大括号，但我确信你的代码中有这个，因为它在Chrome上工作。

奇怪的是，在我的机器上同时使用FF和Chrome - 当你调用它时，你如何调用hide_slide_left以及button_one和button_two是什么？

Answer 3

我不认为Firefox使用display: none;样式时会应用转换 - 您需要以不同的方式隐藏按钮，可能使用visibility: hidden;。

Answer 4

试试这个

setAttribute( 'style', 'display:none' )

而不是

style.display = 'none';

我还不能测试它，但我认为在FF中有一些奇怪的行为。

element.style.display ='none'在firefox中不起作用，但是在chrome中

4 个答案: