DIV移动动画使用变量存储像素值时失效问题咨询

尝试通过CSS过渡动画实现DIV向右移动时，直接写入固定像素值（如translateX(345px)）动画正常，但通过变量传入像素值时动画失效。测试发现：

• #redBox通过变量设置top属性可正常移动
• #greenBox使用变量设置transform: translateX()时无法生效

相关代码如下：

HTML代码 #

<div id="gameContainer">
    <div class="boxes" id="greenBox"></div>
    <div class="boxes" id="blueBox"></div>
    <div class="boxes" id="redBox"></div>
    <div class="boxes" id="yellowBox"></div>
</div>

<button class="btn btn-primary">Start</button>

CSS代码 #

.boxes{
    transition: transform 1000ms;
}

原JavaScript代码 #

$("button").click(function(){
    // 获取像素值存入变量
    var pixelStored = document.getElementById("blueBox");
    var style = window.getComputedStyle(pixelStored);
    var leftValue = style.getPropertyValue("left");
   
    // 正常生效
    $("#redBox").css({top: leftValue});

    // 失效代码
    $("#greenBox").css("transform", "translateX(leftValue)");  

    // 正常生效
    $("#greenBox").css("transform", "translateX(345px)"); 
});

问题原因 #

失效的核心原因是字符串中未正确解析变量：
"translateX(leftValue)"是一个完整的字符串，JavaScript会把leftValue当作字面量文本处理，最终给元素设置的样式是transform: translateX(leftValue)，浏览器无法识别leftValue这个无效的长度值，因此动画失效。

而$("#redBox").css({top: leftValue})能正常工作，是因为这里直接把变量leftValue作为属性值传入，没有包裹在字符串里，JavaScript会正确解析变量值。

解决方案 #

需要把变量插入到字符串中，有两种常用方式：

1. 字符串拼接 #

用+运算符把变量和字符串片段拼接起来：

$("#greenBox").css("transform", "translateX(" + leftValue + ")");

2. ES6模板字符串 #

用反引号`包裹字符串，通过${变量名}插入变量，写法更简洁：

$("#greenBox").css("transform", `translateX(${leftValue})`);

修改后的完整JavaScript代码 #

$("button").click(function(){
    var pixelStored = document.getElementById("blueBox");
    var style = window.getComputedStyle(pixelStored);
    var leftValue = style.getPropertyValue("left");
   
    $("#redBox").css({top: leftValue});

    // 修复后的代码（二选一即可）
    $("#greenBox").css("transform", "translateX(" + leftValue + ")");
    // 或者 $("#greenBox").css("transform", `translateX(${leftValue})`);
});

内容的提问来源于stack exchange，提问作者adam