Question

什么可以成为性能下降的共鸣。悬停开始的次数越多，延迟就越大......在动画上几次悬停之后我就要等几秒钟。

.post_featured_content{
   opacity:0;

  -webkit-transition: all ease .3s;
  -moz-transition: all ease .3s;
  -o-transition: all ease .3s;
  transition: all ease .3s;
}

.header_featured_posts .featured_item_inner:hover .post_featured_content{
    opacity:1;
}

我犯了一些愚蠢的错误吗？

聚苯乙烯。我必须等待悬停而没有过渡效果

Answer 1

某些更改在浏览器上可能代价高昂。基本上唯一可以快速改变和转换/动画的东西是：

位置（使用转换）
缩放
轮换
不透明度

您的示例仅使用opacity。这通常不会导致性能问题。是否还有其他属性被更改？他们也需要过渡吗？如果答案是否，请将过渡更改为阅读transition: opacity .3s ease。

如果您要更改其他任何内容，您的浏览器将需要一直重新绘制屏幕，这可能会导致性能问题。

如果您网站的某个部分正在更改大量属性，则包含以下css可能很有用： translate3d(0,0,0)

这会强制GPU创建一个单独的图层来处理所有更改。

有关详情，建议您选择read here

CSS性能下降

1 个答案: