jquery - 不要覆盖 css 属性，而是使用 jQuery 添加它们

Question

我只是想知道如何使用 jquery .css() 函数不覆盖，而是向 css 属性添加附加值。

例如，我有一个元素当前具有 css transform:translate(-50%, -50%) 。我想使用 jQuery .css() 函数来添加 transform:rotate(90deg)，但是当我使用它时，它会覆盖它。

如果我的描述令人困惑，请查看这个 fiddle 。 http://jsfiddle.net/justinbchristensen/mvhwbjLo/1/

您将在 fiddle 中看到，当您第一次单击该按钮时，正方形会丢失其原始变换，向下滑动并旋转，但随后对该按钮的所有单击都会旋转该正方形，因为它不会丢失“transform:translate” ' 属性。

我不想在我的 .css() 函数中说 element.css('transform', 'translate(-50%,-50%)rotate(90deg)' ，我只是希望能够将旋转添加到现有的转换中。

有什么办法可以做到这一点吗？

Answer 1

由于 transform 是一种简写，因此必须组合这些值...没有增量方法。

您可以做的是检索以前的值并附加新值:

Updated JsFiddle

var rotation = 0;
function rotate() {
    rotation += 90;
    var rotationString = 'rotate(' + rotation + 'deg)';
    var prev = $('#square').css('transform');
    $('#square').css('transform', prev + " " + rotationString);
}