为什么 CSS3 带有 Javascript 的 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 以下的 Edge 和 Internet Explorer 中不起作用，因为回调是在重绘后调用的。

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

其他解决方案是setTimeout()

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

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

Why CSS3 translate() animation with Javascript does not work

javascript

translate

css-transitions