visibility：hidden的VS显示：无VS不透明度：0 [英] visibility:hidden vs display:none vs opacity:0

问题描述

我目前开始上的动画项目。在项目中，我将有超过40000 DIV 和反复动画。如果任何 DIV 取值是被动的状态（即它不是至少2秒动画），我也不会显示出来，以提高动画性能。

I'm currently starting on an animation project. In the project I'll have more than 40000 divs and animate them iteratively. If any of divs are in passive state (i.e. it's not animating at least for 2 seconds), I won't display them to increase animation performance.

现在的问题是：哪个CSS属性是最适合这个

The question is: which css property is the most suitable for this?

.passive1{
   display:none
}

.passive2{
    visibility:hidden;
}

.passive3{
    opacity:0;
}

喜欢FPS

和我怎么能衡量渲染性能，GPU的使用？

And how can I measure rendering performance like fps, gpu usage?

推荐答案

答案发现这里会回答你的第一个问题（最有可能的显示：无作为空间被彻底崩溃了）。

The answer found here will answer your first question (most likely display:none as the space is collapsed completely).

要你的第二个问题，工具，如这将可​​能对您有用。但是40000的div听起来像是太多的，你会使用帆布或SVG（例如，使用 KineticJS 可能有更好的表现库这个处理动画 - 变换，旋转，缩放等）为您

To your second question, tools such as this will probably be useful for you. However 40,000 divs sounds like way too many and you will probably have better performance using canvas or SVG (for example, using the KineticJS library as this handles animations - transformation, rotation, scale, etc.) for you.

这篇关于visibility：hidden的VS显示：无VS不透明度：0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！