转换：在所有版本的 Firefox 中扩展都非常缓慢答案

【问题标题】：transform: scale immensely slow in all versions of firefox转换：在所有版本的 Firefox 中扩展都非常缓慢
【发布时间】：2012-02-17 04:05:08
【问题描述】：

请检查：

这在safari中速度正常，但是在firefox中缩放效果真的很慢。

有趣的是，如果我添加：

.item {
      width:100px;
      height:100px;
}

它似乎加快了一点（仍然不完全流畅）。但这不是我的图像的大小，所以看起来很乱：

如果我将项目宽度/高度设置为我的图像大小，事情又会变慢：

.item {
      width:160px;
      height:160px;
}

任何想法，这是什么原因？我没有想法，我已经删除/添加了陈述，但似乎没有任何帮助。这是在不同的 Firefox 版本中测试的，最高版本 10。

谢谢，卫斯理

【问题讨论】：

【解决方案1】：

要增强动画效果，可以从#container .item .thumbnail 中删除box-shadow 属性，该属性很重，会减慢动画速度。
但如果您仍然想要阴影效果，可以尝试将其作为背景而不是动画的一部分。

它应该需要一些更改，但是从动画 div 中删除 box-shadow 属性会使其更快。 “项目缩放” div 负责动画。通过将“缩放”类从“项目”类中分离出来，并在每个类上应用正确的 css 属性，动画会更快地工作。（我用萤火虫试过）

HTML：

<div class="item">
  <div class="zoom">
    <div class="thumbnail">
        <img src="...">
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

绝对定位您的元素，使它们不属于文档的正常流程。这将使浏览器不会在每次播放动画时都尝试重绘页面。

当元素相对定位时，当一个元素被改变时，它们会相互影响，所以它们都必须重新绘制，以确保改变一个元素不会影响到所有元素。

我做了一个demo，对元素进行了绝对定位，你可以看到动画效率要高很多。

【讨论】：