javascript - 为什么过渡在 margin-left 属性中不起作用

Question

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

我可以在 jQuery 的帮助下使用 animate 函数。但是我想用 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');
  }

fiddle https://jsfiddle.net/uvsb6asa/3/

Answer 1

您将过渡添加到了错误的位置:

工作 fiddle (初始下一个/后一个有问题):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;
}