CSS3はクロムではもう動作しません

Question

私が覚えている限り、私はCSS3トランジションで今まで私には何の問題もありませんでした。突然（クロームの更新や他のコードの変更のため）、chrome（32.0.1700.77）での動作を停止しましたが、他のすべてのブラウザ（および古いバージョンの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'); 
    }); 
}); 

Answer 1

あなたの問題は、未定義のプロパティからアニメーション化しようとしているということです：あなたは239pxにleftを変更しているが、明示的に最初に0としてそれを指定しないでください。従って、239pxへの有効な滑らかな遷移がない値は、autoにデフォルト設定されています。

left:0を基本定義に追加しても問題ありません。

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