CSS3轉換不再適用於Chrome

據我所知，直到現在，我還沒有遇到任何與CSS3轉換有關的問題。突然間（可能是因爲Chrome更新或其他代碼修改），它剛剛停止在chrome（32.0.1700.77）中工作，但仍然適用於所有其他瀏覽器（以及舊版本的chrome）。CSS3轉換不再適用於Chrome

@media screen and (max-width: 1325px) { 
    .row-offcanvas { 
     position: absolute; 
     -webkit-transition: all 0.25s ease-out; 
     -moz-transition: all 0.25s ease-out; 
     transition: all 0.25s ease-out; 
     width: 100%; 
    } 

    button.toggle { 
     display: inline-block; 
    } 

    .row-offcanvas-left, 
    .sidebar-offcanvas { 
     left: -239px; 
     z-index: 9999; 
     height: 700px; 
    } 
    .row-offcanvas-left.active { 
     left: 239px; 
    } 
    .sidebar-offcanvas { 
     position: absolute; 
     top: 0; 
     width: 239px; 
    } 
}

我對這部分網站沒有做任何修改，我也無法解釋它爲什麼突然不能工作。轉換是一個面板，當點擊一個按鈕時，這個面板可以滑動出來，由這個javascript位（不負責動畫）觸發。

$(document).ready(function() { 
    $('[data-toggle=offcanvas]').click(function() { 
    $('.row-offcanvas').toggleClass('active'); 
    }); 
});

來源

2014-01-14 Jon Girard

[Chrome不再需要'-webkit-'前綴]（http://caniuse.com/css-transitions）。除此之外，沒有功能改變。儘管你的JS和CSS都缺少一些curlies和括號。控制檯日誌中是否有任何警告或錯誤？ DOM檢查器中無法識別的屬性？ –

@ 412在我的複製/粘貼過程中會出現錯字。我很抱歉。 –

@NielsKeurentjes失蹤的括號和括號只是複製/粘貼錯別字。就功能而言，JS執行（它會觸發活動類，打開面板）。唯一奇怪的部分是過渡突然不起作用。 –

你的問題是，你正試圖從一個未定義的屬性動畫：您要更改left到239px，但並沒有明確指定爲0開始。因此它默認爲auto，這是一個沒有有效平滑過渡到239px的值。

將left:0添加到基本定義，你會沒事的。

See a JSfiddle here demonstrating your problem in Chrome 32+。

來源

2014-01-14 23:06:06

您的JSFiddle會同時顯示兩個條形圖，我使用的是Chrome 31.此外，我在過去沒有做過這樣的事情，它使用默認值（本例中爲「auto」）進行動畫。 – Jasper

他聲稱他正在使用Chrome 32測試版，這也是我正在運行的版本，並且其中只有其中一個是動畫設計 - 他也說過它曾經工作過，而且我知道這用於工作，但實際上這是一個修復v32以達到更好的標準合規性。你對默認值是正確的，修正了這個問題。 –

這個答案似乎爲我解決了這個問題。謝謝！ –

CSS3轉換不再適用於Chrome

回答

相關問題