如何使用CSS转换确定性地显示元素并对其进行动画处理？

Question

我正在尝试向处于不可见状态的DOM添加元素，然后将其设置为动画。

具体做法是：

• 我使用以下内联样式向DOM添加元素：transition: all 200ms linear
• 我使用getBoundingClientRect测量元素的定位原因（这是在元素实际可见之前完成的）
• 我设置transform: scale(0)，这是初始动画状态
• 接下来，我访问元素的offsetHeight属性以强制DOM重排（请参阅this question）：void(elem.offsetHeight)。这样做是为了让应用的样式真正生效。
• 要显示元素并为其设置动画，请设置transform: scale(1)

预期的结果是元素以一个漂亮的动画弹出。当我在Firefox中打开devtools时，一切都按预期工作。当开关工具关闭时，该元素在大约80％的时间内根本没有动画。在Chrome中，动画始终按预期工作。

关于让Firefox devtools打开的事情导致元素在确定性方面动画化。我怀疑额外的开销，或者可能是对DOM的额外查询，是当devtools是开。

如何确定性地开展此工作？

我尝试在requestAnimationFrame回调中添加动画属性无济于事，并且由于它会引入的感知输入延迟而没有接受setTimeout作为可接受的解决方案，并且事实上，这是一个严重的黑客攻击。