jquery - 如何使用 Jquery 应用多个 css 转换属性

Question

我尝试应用一些动态的 scale 和 translate css properties something like this

var scale="scale(2,2)";
var translate="translate(20,20)";
var prop=scale+" "+translate;
$(this).css({
            "transform":prop
             });

但这行不通。我什至尝试过这样的事情

 prop="'"+scale+" "+translate+"'";
$(this).css({"transform":prop});

即使这样也不起作用。请帮助解决这个问题。

Answer 1

正如 Harry 所提到的，您必须在您的translate 属性上设置测量单位。

见下文:

var scale="scale(2,2)";
var translate="translate(20px,20px)";
var prop=scale+" "+translate;
$(this).css({
   "transform":prop
});

一个稍微简单的替代方法是改为进行类更改，并将您的 transform 样式分配给新类。

像这样:

$(this).addClass('transform-me');

和 CSS

.transform-me {
  transform:translate(20px, 20px) scale(2,2);
}

以这种方式实现完全相同的结果，但它确实简化了发生错误的故障排除(无论是 CSS 还是 jQuery 导致了问题)。