Question

为了获得更好的性能，我想要替换：

$('#foo').animate({ left: '+=42px' }, 500);

通过转换（或动画）CSS3。但是我们如何才能在CSS中的左侧属性上实现“+ =”？

如何使用相对于前一个的新左侧位置移动div？

THX。

Answer 1

在vanilla-js中你不能使用+=，但你可以改为使用旧值：

＆＃13;

document.getElementById('foo').onclick = function() {
  this.style.left = parseFloat(getComputedStyle(this).left) + 42 + 'px';
};

＆＃13;

#foo {
  position: relative;
  left: 0;
  transition: 2s left;
}

＆＃13;

<div id="foo">Click me multiple times</div>

＆＃13;

Answer 2

您可以使用过渡进行平滑动画。你只需将转换设置放在像这样的元素的CSS中，

#foo {
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out
}

然后使用这样的脚本来增加左侧。

$('#foo').css('left', '+=42px');

您可以参考this page。

CSS动画：使用相对于前一个的新位置移动div

2 个答案: