转换:在所有版本的firefox中扩展速度都非常慢

Question

请检查一下:

这在safari中具有正常速度,但在Firefox中缩放效果非常慢.

有趣的是,如果我添加:

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

它似乎加速了一点(仍然不完全流利).但这不是我的图像的大小,所以它看起来搞砸了:

如果我将项目宽度/高度设置为我的图像大小,则事情会再次减慢:

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

任何想法,因为这是什么原因？我没有想法,我删除/添加了陈述,但似乎没有任何帮助.这是在不同版本10的firefox版本中测试的.

谢谢,韦斯利

Answer 1

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

它应该需要一些更改，但是box-shadow从动画 div 中删除该属性将使速度更快。“item Zoom”div 是负责动画的部分。通过将“zoom”类从“item”类中分离出来，并在每个类上应用正确的 css 属性，动画将运行得更快。（我已经用萤火虫试过了）

HTML：

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