页面刷新后JS动画仅在alert()触发时生效的技术问题

这是个典型的浏览器渲染优化导致的动画触发失效问题，我来帮你彻底搞定！

问题根源 #

当你连续执行「移除元素style」→「添加旋转style」这两个操作时，浏览器会出于性能优化，把这两个DOM样式修改操作合并成一次重绘。这就导致浏览器认为元素的初始状态（无旋转）和最终状态（180度旋转）是直接切换的，没有中间过渡的必要，所以动画就没触发。

而alert()的特殊之处在于：它会阻塞JavaScript执行，同时强制浏览器完成当前所有未处理的渲染任务（包括你移除style的操作）。等alert关闭后，再执行旋转样式的修改时，浏览器能清晰看到「初始无旋转」→「最终180度旋转」的状态变化，自然就触发过渡动画了。

解决方案 #

下面提供几种可靠的修复方式，按推荐优先级排序：

1. 使用requestAnimationFrame（最推荐）

把旋转样式的修改放到下一次浏览器渲染周期执行，确保浏览器先完成「移除style」的重绘，再处理旋转逻辑：

function spin() { 
    const rouletteImg = document.getElementById("rouletteImage");
    // 先移除原有内联样式
    rouletteImg.removeAttribute('style'); 
    // 在下一渲染帧执行旋转操作
    requestAnimationFrame(() => {
        const deg = 180; 
        const css = 'transform: rotate(' + deg + 'deg); -webkit-transform: rotate(' + deg + 'deg);'; 
        rouletteImg.setAttribute('style', css); 
    });
}

2. 精准重置transform属性（更优雅）

不用移除整个内联style，只重置transform为初始状态，再触发旋转，避免影响元素其他可能存在的内联样式：

function spin() { 
    const rouletteImg = document.getElementById("rouletteImage");
    // 先重置transform为初始状态
    rouletteImg.style.transform = 'rotate(0deg)';
    rouletteImg.style.webkitTransform = 'rotate(0deg)';
    // 在下一渲染帧应用旋转
    requestAnimationFrame(() => {
        const deg = 180; 
        rouletteImg.style.transform = `rotate(${deg}deg)`;
        rouletteImg.style.webkitTransform = `rotate(${deg}deg)`;
    });
}

3. 添加微小延迟（应急方案）

用setTimeout给浏览器留足重绘时间，虽然不如前两种优雅，但也能解决问题：

function spin() { 
    document.getElementById("rouletteImage").removeAttribute('style'); 
    setTimeout(() => {
        var deg = 180; 
        var css = '-webkit-transform: rotate(' + deg + 'deg);'; 
        document.getElementById("rouletteImage").setAttribute( 'style', css ); 
    }, 10); // 10ms足够让浏览器完成重绘
}

额外兼容性优化 #

建议给CSS补充标准过渡属性，适配更多现代浏览器：

img { 
    transition: transform 4s ease-out;
    -webkit-transition: -webkit-transform 4s ease-out; 
}

内容的提问来源于stack exchange，提问作者D.re48