问题描述
我正在将React与Material Ui一起使用，并且遇到一种情况，在这种情况下，我在加载资源时会渲染不确定的进度栏。虽然未显示进度条，但仍通过visibility: hidden css属性占用空间。
这样做，进度条的css动画也将保持活动状态，并且在不可见时仍可以使用元素检查器查看。
要禁用该功能，我将进度条的模式更改为“确定”（不带动画），如下所示：
<Fade in={visible}>
<LinearProgress variant={visible ? 'indeterminate' : 'determinate'} />
</Fade>
我的问题是：不可见的CSS动画如何影响性能和重绘？禁用它重要吗？
编辑：根据我的检查，虽然它不会导致重新绘制，但动画仍会运行并在隐藏时（至少在chrome和Firefox中）重新计算样式和布局。
解决方法
根据我的检查，虽然它不会引起重新绘制，但动画仍会运行并在隐藏时重新计算样式和布局。
以下是此类性能录制的屏幕截图（在Chrome中）。请注意
