余白左のプロパティでトランジションが動作しない理由

Question

トランジションプロパティがmargin-left property.Actuallyで動作している理由を教えていただけますか？私はmargin-leftプロパティをシフトしています。

私はCSSでやりたい.But機能をアニメーション使用のjQueryの助けを借りて行うことができます

私はこの

.outer li { 
    display: inline-block; 
    -webkit-transition: margin-left 2s; /* Safari */ 
    transition: margin-left 2s; 
} 

JS

function addToMarginLeft(elem, pixels) { 
    var ml = parseFloat(elem.css('margin-left')); 
    /* elem.animate({ 
    'margin-left': (ml + pixels) + 'px' 
    },1000)*/ 
     elem.css('margin-left', (ml + pixels) + 'px'); 
    } 

フィドル https://jsfiddle.net/uvsb6asa/3/のようにしてみてください

Answer 1

あなたは間違ったものへの移行を追加しました：https://jsfiddle.net/uvsb6asa/6/

ユアーズ：

.outer ul { 
    width: 600px; 
    margin: 0 auto 0 auto; 
} 

.outer li { 
    display: inline-block; 
    -webkit-transition: margin-left 2s; /* Safari */ 
    transition: margin-left 2s; 
} 

正しい：

.outer ul { 
    width: 600px; 
    margin: 0 auto 0 auto; 
    -webkit-transition: margin-left 2s; /* Safari */ 
    transition: margin-left 2s; 
} 

.outer li { 
    display: inline-block; 
} 

Answer 2

フィドルの作業は（初期次/バックで問題があります）

問題は、liにトランジションを追加することですが、ulの左余白を変更しています。あなたはやっている

：

.outer li { 
    display: inline-block; 
    -webkit-transition: margin-left 2s; /* Safari */ 
    transition: margin-left 2s; 
} 

は、代わりにこれを行うと、それは動作します：

.outer li { 
    display: inline-block; 

} 

.outer ul { 
    -webkit-transition: margin-left 2s; /* Safari */ 
    transition: margin-left 2s; 
} 

が、これは

を役に立てば幸い