动画功能在Chrome浏览器中工作，但不在Firefox中

Question

我有一个居中的div和4个其他divs - 一个位于居中div的两边。当我点击一个按钮时，每个div滑入框架并推出居中的div。

它在Chrome中正常工作，但无法使用Firefox，使我从萤火虫没有错误。

Here是我的实现，它目前不在firefox中正常工作。

正如你所看到的，在Firefox中居中的div只是消失而不是滑出屏幕。使用chrome，居中的div按预期滑出。

有人可以看看萤火虫，并告诉我他们认为可能会导致问题吗？

此代码基于jsfiddle，可以使用chrome或firefox正常工作。

下面是代码到的jsfiddle：

这里是HTML

<div id="fullContainer"> 
    <div id="right"> 

    </div> 
    <div id="left"> 

    </div> 
    <div id="top"> 

    </div> 
    <div id="bottom"> 

    </div> 
</div> 
<div id="centerContainer"> 
    <div id="relativeContainer"> 
     <div id="content"> 
      This is where your face should go. Notice that I placed it within a centering div. 
      This will enable the face to be absolutely positioned, and allow for you to modify 
      it's position when the side-bars slide in. 
      <div data-move="left">Open Left</div> 
      <div data-move="right">Open Right</div> 
      <div data-move="top">Open Top</div> 
      <div data-move="bottom">Open Bottom</div> 
     </div> 
    </div> 
</div> 

这里是CSS

#centerContainer { 
    position:fixed; 
    top:50%; 
    left:50%; 
    width:0; 
    height:0; 
} 
#relativeContainer { 
    position:relative; 
} 
#fullContainer { 
    position:fixed; 
    width:100%; 
    height:100%; 
    top:0; 
    left:0; 
} 
#content { 
    position:absolute; 
    width:300px; 
    height:400px; 
    top:-200px; 
    left:-150px; 
    background:#BADA55; 
    border:1px solid #444; 
    padding:10px; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 
#content.right { 
    left:-250px; 
} 
#content.left { 
    left:-50px; 
} 
#content.bottom { 
    top:-300px; 
} 
#content.top { 
    top:-100px; 
} 

#content div { 
    cursor:pointer; 
    color:blue; 
    text-decoration:underline; 
    margin-top:15px; 
    text-align:center; 
} 
#left { 
    position:absolute; 
    top:0; 
    left:-125px; 
    height:100%; 
    width:100px; 
    background:blue; 
    border:1px solid #444; 
    padding:10px; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

#left.opened { 
    left:0; 
} 

#right { 
    position:absolute; 
    top:0; 
    right:-125px; 
    height:100%; 
    width:100px; 
    background:green; 
    border:1px solid #444; 
    padding:10px; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

#right.opened { 
    right:0; 
} 

#top { 
    position:absolute; 
    left:0; 
    top:-125px; 
    width:100%; 
    height:100px; 
    background:yellow; 
    border:1px solid #444; 
    padding:10px; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

#top.opened { 
    top:0; 
} 

#bottom { 
    position:absolute; 
    left:0; 
    bottom:-125px; 
    width:100%; 
    height:100px; 
    background:red; 
    border:1px solid #444; 
    padding:10px; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

#bottom.opened { 
    bottom:0; 
} 

这里是的javascript：

function SlideOut(element){ 

    $(".opened").removeClass("opened"); 
    $("#"+element).addClass("opened"); 
    $("#content").removeClass().addClass(element); 

} 
$("#content div").click(function(){ 

    var move = $(this).attr('data-move'); 

    SlideOut(move); 

}); 

这里是fiddle

谢谢

凯蒂

Answer 1

我做了一些测试，发现发生了什么。这是为了说明和演示目的而在此fiddle中再现的。

在Firefox中，如果您正在转换CSS属性left，它需要有一个初始值。如果不是，那么它不会转换，它只会将值分配给属性。

在Chrome中，如果您没有初始值设置，它显然只是从任何地方开始，不用担心。

如果您在Firefox中查看上述小提琴并单击第一行，则它会出现在更远的位置，而第二行会跳过。唯一不同的是第二行有一个left: 0最初设置。在Chrome上，两者的工作方式相同。

如果你在你的#content div上放置left: 0，那么它会像在Firefox中那样滑动。 （经过Firebug测试，确实可以修复它）。