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

Question

我做了这个页面

http://safari-as.squarespace.com

在主页上，它是一个由 squarespace 模板制成的画廊。我想在画廊的图像之间添加过渡。

这是通过将其添加到 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: 不透明度 ms 缓入出局；}