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

【问题标题】：CSS animation : move a div with the new position relative to the previousCSS动画：移动一个相对于前一个新位置的div
【发布时间】：2014-11-20 10:43:29
【问题描述】：

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

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

通过过渡（或动画）CSS3。但是我们怎样才能在 CSS 的 left 属性上实现“+=”呢？

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

谢谢。

【问题讨论】：

其实我相信 CSS 和 jQuery 动画在后端是一回事 =)
什么会导致过渡/动画？结束后会发生什么？
@Matrix，你问的是不可能的，因为 CSS 不是一种编程语言，它是一种样式标记。据我所知，+= 在 css 中不存在。此外，正如 Paulie 上面所写的，无论如何，您很可能需要使用 javascript 触发动画，所以最好坚持.animate。
是的，我正在考虑。我会做一个像 .animation {transition: left += 10px} 这样的 css 类，然后将类应用于 DOM 元素，但我会使用 JS。所以，现在的问题是：“添加类比更改左侧样式属性更快？”^^
抱歉回复晚了，下次回复某人时请添加@whatever，以便我们收到通知:)。关于性能，你会想看看Here

标签： javascript css css-transitions css-animations

【解决方案1】：

在 vanilla-js 中，您不能使用 +=，但您可以获取旧值：

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

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

&lt;div id="foo"&gt;Click me multiple times&lt;/div&gt;

【讨论】：

【解决方案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
}

然后用这样的脚本来增加left。

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

您可以参考this page。

【讨论】：

我的目标不是使用 JS（和 jQuery 更多）来制作动画。我使用动画，因为我使用延迟，对不起，我没有在我的例子中写延迟，这是我的错，我编辑 ;)