Jetpack延迟加载图像淡入

Question

我正在使用Jetpack来延迟加载图像，并希望使用CSS很好地淡入其中。我尝试在我的主题中添加以下CSS：

.jetpack-lazy-image {
    opacity: 0;
    -webkit-transition: .3s;
    transition: .3s;
}

.jetpack-lazy-image--handled {
    opacity: 1;
}

但这不管用。我也尝试过将它添加到默认的WP主题中，但是，它也不起作用。有人能告诉我我错过了什么吗？

谢谢。

Answer 1

哪一部分不起作用？您可能需要更改转换属性，以包括名称和延迟。可选地添加计时：

.jetpack-lazy-image {
    opacity: 0;
    transition: opacity 0.3s ease;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/transition

Answer 2

不幸的是，在图像实际显示之前，.jetpack-lazy-image--handled被添加到img中。因此，不透明度转换甚至在图像出现之前就发生了。也许这是Jetpack中的一个bug。