为什么使用 Javascript 的 CSS3 translate() 动画不起作用

Question

我有一个简单的CSS3 translate((代码，应该由Javascript触发。但它不会对翻译进行动画处理，它会立即跳到该位置。如果我使用 css ：hover，它会按预期工作。 但不是 JS。我做错了什么？下面是 JSFiddle 示例 https://jsfiddle.net/umkrt5b1/这是代码：

<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>

Answer 1

尝试将其包装在requestAnimationFrame此回调函数在浏览器准备好重新绘制之前被调用。这在低于版本 12 和 Internet Explorer 的 Edge 中不起作用，因为回调是在重新绘制后调用的。

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

其他解决方案是使用setTimeout()

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