css 动画不可见时会影响性能吗

Question

我将 React 与 Material Ui 一起使用，遇到这样的情况：我在加载资源时呈现不确定的进度条。虽然不显示进度条，但还是占用了space via visibility: hidden css 属性.

在这样做时，进度条的 css 动画也保持活动状态，虽然不可见，但仍然可以在运行元素检查器中查看。

为了禁用它，我将进度条的模式更改为确定（没有动画），如下所示：

<Fade in={visible}>
    <LinearProgress variant={visible ? 'indeterminate' : 'determinate'} /> 
</Fade>

我的问题是：不可见的 css 动画如何影响性能和重绘？禁用它重要吗？

编辑：根据我的检查，虽然它不会导致重绘，但动画仍然运行并在隐藏时重新计算样式和布局（至少在 chrome 和 firefox 中）。

Answer 1

根据我的检查，虽然它不会导致重绘，但动画仍然运行并在隐藏时重新计算样式和布局。

这是这样一段表演录音的截图（在Chrome中）。请注意，这

Do css animations affect performance while invisible