你能告诉我为什么过渡属性在 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/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;
}
关于javascript - 为什么过渡在 margin-left 属性中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42240126/