为什么使用 Javascript 的 CSS3 translate() 动画不起作用 [重复]答案

【问题标题】：Why CSS3 translate() animation with Javascript does not work [duplicate]为什么使用 Javascript 的 CSS3 translate() 动画不起作用 [重复]
【发布时间】：2020-10-21 15:09:45
【问题描述】：

我有一个简单的 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>

【问题讨论】：

这有点依赖于浏览器，如果他们在执行该脚本之前进行了重新计算，例如当前的 FF 会，Chrome 不会。更好地保持安全，trigger it yourself. 我不认为规范要求他们这样做。
你为什么关闭这个问题？我看不出有什么关系。另外，如果我问一些问题，我想问的是编程模式中的纯问题，而不是“我有一个大型游戏项目，在其代码中使用了大量的 jquery。前段时间我把所有内容都剥离了”谁想阅读它？这是从我的代码中提取的纯问题。没有人对我的项目或想法感到好奇......
您是否阅读了那里的答案及其链接？您的 situation 与那个 exactly 相同：在您设置新的转换值之前，浏览器尚未执行重新计算 -> 它看不到任何要转换的内容来自。
可能是。但这很干净。为谷歌清洁为人们清洁。我讨厌垃圾代码。

标签： javascript css-transitions translate

【解决方案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)';
})

【讨论】：

它可以工作，但它也应该在没有英国皇家空军的情况下工作。
@Čamo 我已经更新了我的答案
是的，它也可以。但是为什么它不能按原样工作呢？
单个 requestAnimationFrame 和 0 超时不一定能确保它工作。使用单个 rAF，您将是正确的 before 下一幅画，超时 0 您可能在 0 到 16 毫秒之前。如果浏览器等待下一次绘制操作进行重新计算，您将面临与同步调用相同的问题。为了安全起见，您应该等待 rAF 的 0 超时，但这有点没用，因为如欺骗中所示，所有这些都可以同步完成。
stackoverflow.com/questions/54344996/…