当使用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:中删除立方bezier，并将其替换为

。幻灯片{-webkit-transition: opacity ms ease-in-out;}