为何动态创建的img元素transition:all 2s属性不生效？

问题根源 #

你遇到的问题核心是：元素刚被添加到DOM就立刻修改transform属性，浏览器的渲染引擎会将这些连续的样式操作合并为一次重绘，无法识别到"初始状态→目标状态"的变化过程，因此直接跳过了过渡动画。

修复方案 #

需要让浏览器先完成元素的初始渲染，再执行transform的修改。可以通过requestAnimationFrame或setTimeout（延迟0ms即可，会将操作推入下一个事件循环）实现这个时间差。

修改后的完整代码 #

document.addEventListener("click", function(e) {
    const temp = document.createElement("img");
    temp.src = "https://images.freeimages.com/images/large-previews/82d/eastern-rosella-1-1617233.jpg";
    
    // 修正原代码中错误的样式赋值方式
    temp.style.position = "absolute";
    temp.style.left = `${e.clientX}px`;
    temp.style.top = `${e.clientY}px`;
    temp.style.width = "200px";
    temp.style.height = "200px";
    temp.style.transition = "all 2s";
    // 显式设置初始transform状态（可选，但更清晰）
    temp.style.transform = "translate(0, 0)";
    
    document.body.appendChild(temp);
    
    // 推迟transform修改，让浏览器先渲染初始状态
    requestAnimationFrame(() => {
        temp.style.transform = "translate(0px, 50px)";
    });
});

关键修改说明 #

1. 移除了原代码中style+=、position+=这类错误的样式拼接写法，直接通过属性赋值设置样式，避免出现无效的样式字符串。
2. 显式设置初始transform: translate(0,0)，明确元素的起始状态（即使不写，默认transform为none，浏览器也能识别变化，但显式设置更直观）。
3. 使用requestAnimationFrame将transform修改操作推迟到浏览器下一次重绘前执行，确保浏览器先渲染出初始位置的图片，再捕捉到状态变化，从而触发过渡动画。

你也可以用setTimeout替代requestAnimationFrame，效果一致：

setTimeout(() => {
    temp.style.transform = "translate(0px, 50px)";
}, 0);

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