使用 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: 不透明度 msease-in-out;}