为什么转型不起作用的保证金左边的财产

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

希望这有助于