0

我在 Firefox 中对图像的 moz-transition 有问题：

.view-tenth img {
   -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);
   -webkit-transition: all 0.7s ease-in-out 0s;
   -moz-transition: all 0.7s ease-in-out 0s;
   -o-transition: all 0.7s ease-in-out 0s;
   -ms-transition: all 0.7s ease-in-out 0s;
   transition: all 0.7s ease-in-out 0s;
}

当页面加载时，所有图像开始几乎不可见（不透明度看起来大约为 0.1 或 0.3），然后褪色到大约 0.8 的不透明度，而不是 1.0。一个或两个图像可能会同时加载，有点其他......它仅在第一页加载时发生。当我转到另一个页面然后返回上一个页面时，所有图像都加载得很好。我认为这个错误伴随着一些兑现同步。

我还对图像使用“预加载”脚本，但是当我关闭此脚本时，问题仍然存在。

我注意到当我将过渡持续时间设置为 2 秒时问题消失了，但这不是一个好的决定，粗略。

我该如何解决这个问题？

添加：

.view-tenth:hover img {
   -webkit-transform: scale(2);
   -moz-transform: scale(2);
   -o-transform: scale(2);
   -ms-transform: scale(2);
   transform: scale(2);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=1)";
   filter: alpha(opacity=1);
   opacity: 1;
}

当鼠标悬停在图像上时，它会将图像从 1 缩放到 2，并在隐藏 div 之前显示，也可以缩放。如果我只使用 scale 属性，也许我不需要为所有元素调用转换？我必须写的：

-moz-transition: **scaleY** 0.7s ease-in-out 0s;

但它没有任何效果。

4

0 回答 0