爲什麼轉型不起作用的保證金左邊的財產

Question

你能否請告訴我爲什麼過渡財產是在margin-left財產工作。實際上按鈕單擊我移動margin-left屬性。我需要一些動畫。

我可以用jQuery的幫助下使用。但我想用CSS做動畫功能做

我嘗試這樣

.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; 
} 

希望這有助於