動畫功能在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測試，確實可以修復它）。