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

希望这有帮助

为什么过渡不在保证金左边的财产

2 个答案: