为什么过渡在边距左属性中不起作用

Question

你能告诉我为什么过渡属性在margin-left属性中起作用吗？实际上在按钮上单击时我正在转移margin-left属性。我需要一些动画。

我可以使用animate函数在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

您将过渡添加到了错误的过渡中：

工作提琴（最初的next / back有问题）： 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;
}

希望这可以帮助