为什么使用Javascript的CSS3 translate（）动画不起作用

我有一个简单的CSS3 translate（）代码，它应该由Javascript触发。但它不会设置平移动画，而是会立即跳到该位置。如果我使用css:hover，它将按预期工作。 但不是JS。我做错了什么？下面是一个JSFIDLE示例 代码如下：

<style>
    #test {
        transition: transform 1000ms linear;
        background-color: green;
        display: inline-block;
        width: 50px;
        height: 50px;
    }
</style>

<div id="test"></div>

<script>

    document.getElementById('test').style.transform = 'translateX(200px)';

</script>

#试验{
转换：转换1000ms线性；
背景颜色：绿色；
显示：内联块；
宽度：50px；
高度：50px；
}
document.getElementById（'test'）.style.transform='translateX（200px）'；

尝试将其包装在

requestAnimationFrame

在浏览器准备重新绘制之前调用此回调函数。这在低于版本12的Edge和internet explorer中不起作用，因为回调是在重新绘制后调用的

  window.requestAnimationFrame(function(){
     document.getElementById('test').style.transform = 'translateX(200px)';
  })

另一种解决方案是使用

setTimeout（）

---

它可以工作，但是如果没有皇家空军，它也应该可以工作。@chamo我已经更新了我的答案是的，它也可以工作。但是为什么它不能正常工作呢？单个requestAnimationFrame和0超时不一定能确保它正常工作。如果是单架rAF，你就可以在下一幅画之前完成，如果超时为0，你就可以在0到16毫秒之间完成。如果浏览器等待下一个绘制操作进行重新绘制，您将面临与同步调用相同的问题。为了安全起见，您应该等待rAF的0超时，但这有点没用，因为如dupe中所示，所有这些都可以同步完成。这有点取决于浏览器是否在执行该脚本之前进行了recalc，例如当前FF有，Chrome没有。最好安全些，我不认为规范要求他们这样做。你为什么关闭这个问题？我没有看到任何亲戚。另外，如果我问一些问题，我想问的是编程模式中的纯问题，而不是“我有一个大型游戏项目，在其代码中使用了大量jquery。不久前，我去掉了所有内容”，谁想阅读它？这纯粹是从我的代码中提取的问题。没有人对我的项目或想法感到好奇……你读了答案和链接了吗？您的情况与此完全相同：在设置新的转换值之前，浏览器尚未执行recalc->它没有看到任何要从中转换的内容。可能是。但这是干净的。为谷歌清洁为人们清洁。我讨厌垃圾代码。

setTimeout(()=> {
     document.getElementById('test').style.transform = 'translateX(200px)';
})