使用CSS3轉換的可能的Webkit錯誤

所以，我現在正在嘗試使用CSS3轉換，因爲它有點標準化，我們沒有前綴的重載處理。我所擁有的是一個基本的三排導航欄，當點擊時，兩個酒吧的角度和中間消失（在這個例子中，它停留在那裏，但在我的項目中，它「消失」到一個出現在它後面的元素，恰好是相同的顏色）。頂部和底部的條是僞元素，中間的是正常的元素。使用CSS3轉換的可能的Webkit錯誤

這很難解釋，所以我做了fiddle。

我遇到的問題是在Chrome 29中，酒吧的顏色過渡存在延遲。在Firefox和IE10中，轉換工作。在Chrome中，轉換過渡可行，但背景顏色不適用。在Opera中，既不工作也不在Safari中......好吧，Safari有它自己的問題。

的加價很簡單：

<nav> 
    <div id="menu"> 
     <span></span> 
    </div> 
</nav>

我使用jQuery 1.8.3，我用這個非常複雜的腳本。

$(document).ready(function() { 

$('#menu').click(function() { 
    $(this).toggleClass('active'); 
    $('nav').toggleClass('active'); 
}); 

});

而且我用下面的CSS：

#menu { cursor: pointer; height: 30px; position: fixed; z-index: 200; } 

#menu span { position: relative; margin-top: 10px; } 

#menu span, #menu span:before, #menu span:after { height: 5px; background-color: #231F20; width: 50px; display: block; transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } 

#menu.active span:before, #menu.active span:after { background-color: #F2F2F2; } 

#menu.active span:before { top: 0; transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); } 

#menu.active span:after { bottom: 0; transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } 

#menu span:before, #menu span:after { position: absolute; display: block; content: ""; } 

#menu span:before { top: -10px; } 

#menu span:after { bottom: -10px; }

所以，我的問題是：爲什麼會出現在背景色在Chrome中沒有過渡？我在Opera中做錯了什麼？我知道Opera現在經常依賴-webkit-前綴，所以我認爲無論問題出在哪一個上，它都是另一個。

而且，如果你真的覺得自己是一個解決天才的問題，你能告訴我爲什麼它也會在Safari上變得無足輕重嗎？如果你能得到它，那就是金星和餅乾。

非常感謝你們！

來源

2013-10-01 Kenton de Jong

僞元素的過渡在過去一直很過時 –

我想通了。

我改變了CSS是：

#menu { cursor: pointer; height: 30px; position: fixed; z-index: 200; } 

    #menu span { position: relative; margin-top: 10px; } 

    #menu span, #menu span:before, #menu span:after { height: 5px; background-color: #231F20; width: 50px; display: block; transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } 

    #menu.active span:before, #menu.active span:after { background-color: #F2F2F2; } 

    #menu.active span:before { -webkit-transform: translateY(0) rotate(-45deg); transform: translateY(0) rotate(-45deg); } 

    #menu.active span:after { -webkit-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg); } 

    #menu span:before, #menu span:after { position: absolute; display: block; content: ""; } 

    #menu span:before { -webkit-transform: translateY(-250%); transform: translateY(-250%); } 

    #menu span:after { -webkit-transform: translateY(250%); transform: translateY(250%); }

和它的作品。你可以在這個fiddle看到它。

來源

2013-10-01 05:55:31

使用CSS3轉換的可能的Webkit錯誤

回答

相關問題