悬停闪烁问题上的 CSS3 过渡背景图像

Question

我在使用 CSS3 进行背景图像转换时遇到问题。问题是第一次滚动时它偶尔会闪烁。如果您第二次滚动它，则可以从一个到另一个平滑淡入/淡出。

我在谷歌上搜索了这个问题，发现很多人都有同样的问题。但是他们通过使用 1 个背景图像然后使用 background-position 将其隐藏直到您滚动它来解决这个问题。

我的无法做到这一点，因为我需要从一张图像到另一张图像的平滑淡入/淡出动画(它是同一按钮的 2 张图像，具有不同的颜色和东西。)如果我使用背景 - position 它将来自按钮下方的位置。我需要一个淡入淡出动画。

所以我猜这个问题的发生是因为图像没有被加载，并且它需要几分之一秒才能加载。

代码如下:

    .btn-denken{
        background:url(../images/btn-denken.png);
        width:219px;
        height:40px;
        float:left;
        -webkit-transition: all 0.3s ease-in-out 0s;
        -moz-transition: all 0.3s ease-in-out 0s;
        -ms-transition: all 0.3s ease-in-out 0s;
        -o-transition: all 0.3s ease-in-out 0s;
        transition: all 0.3s ease-in-out 0s;
    }

    .btn-denken:hover{
        background:url(../images/btn-denken-hover.png);
    }

非常感谢帮助!谢谢!

Answer 1

诀窍是确保您要进行过渡的图像已经由 CSS 加载，这就是为什么将它们作为虚拟图像放在文档中并通过 CSS 加载它们是解决方案。

在下面的示例中，我有 4 张图像 (0.jpg - 3.jpg)，如果我现在在我的文档 (html) 上设置类“.landing-1”，图像会正确过渡。

在我的 CSS 中:

body {
    -webkit-transition: background 1s;
    background: url(0.jpg) no-repeat center center / cover fixed;
}
.dummy-image {
    position: absolute;
    left: -100%; /* to hide the dummy */
}

用于缓存图像的简单 javascript:

var images = [],
    load = function() {
        $('head').append('<style>html.landing-'.concat(this.index, ' body.landing, .dummy-image-', this.index, ' { background: url(', this.src, ') no-repeat center center / cover fixed; }</style>'));
        $('body').append('<div class="dummy-image dummy-image-'.concat(this.index, '">'));
      };

for(var i=0; i<4; i++) {
    var image = document.createElement('img');
    image.src = i + '.jpg');
    image.index = i;
    image.onload = load;
    images.push(image);
}