css - 使用 css 转换时，图库图像不会在页面加载时显示

Question

我做了这个页面

http://safari-as.squarespace.com

在主页上，它是一个由方形空间模板制作的画廊。我想在图库中的图像之间添加过渡。

这是通过将其添加到 css 中完成的:

.slide {
-webkit-transition: all 600ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
   -moz-transition: all 600ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    -ms-transition: all 600ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
     -o-transition: all 600ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
        transition: all 600ms cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
    }

问题是，在此更改之后，画廊中的大照片将不会显示，直到您调整浏览器窗口的大小。

有谁知道如何确保在页面加载时显示大图像？

Answer 1

我在使用 webkit 浏览器时遇到了同样的问题。到目前为止，我找到的唯一解决方案是从 -webkit-transition: 中删除 cubic-bezier: 并将其替换为

.slide { -webkit-transition: opacity ms ease-in-out;}