为什么转换在 margin-left 属性中不起作用答案

【问题标题】：why transition not working in margin-left property为什么转换在 margin-left 属性中不起作用
【发布时间】：2017-07-03 13:37:30
【问题描述】：

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

我可以在 jQuery 的帮助下使用 animate 函数。但我想使用 css

我试试这样

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

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/

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

问题是您正在向 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;
}

希望对你有帮助

【讨论】：

【解决方案2】：

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

工作小提琴（最初的下一个/后退有问题）：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;
}

【讨论】：