我在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。一个或两个图像可以一次加载,位其他...它只在第一页加载时发生。当我转到另一页然后回到之前所有图像加载良好。我认为这个错误伴随着一些兑现同步。
我还为图像使用“预加载”脚本,但是当我关闭此脚本时,问题仍然存在。
我注意到当我设置转换持续时间2s时问题就消失了,但这不是一个很好的决定,粗略。
如何解决此问题?
添加了:
.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;
但它没有任何效果。