JS：css 属性和一个变量中的值

Question

var trns1 = '"transition": "all 1s"';

为什么那行不通？

$('#box').css({"transform": "translate(xy)", trns1 });

不应该完全一样吗：

$('#box').css({"transform": "translate(xy)", "transition": "all 1s" });

Answer 1

没有。您的 JavaScript 对象不正确 – 您不能添加字符串并期望它作为键值对工作。

这会起作用：

var trns1 = { "transition": "all 1s"};
$('#box').css(trns1);

如果您需要添加更多选项，可以轻松完成：

var trns1 = { "transition": "all 1s"};
trans1.color = 'red';
trans1.height = '20px';
$('#box').css(trns1);

最后 trans1 将是

{
    'color' : 'red',
    'height' : '20px',
    'transition': 'all 1s'
}

编辑

根据您的评论，您可以轻松地将事件链接到 jQuery。

var trns1 = {"transition": "all 0.3s ease"};
var trns2 = {"transform": "translateY(4vw)"};

然后像这样使用它们：

$('#box').css(trns1).css(trns2);

JS: css property and value in one variable