Question

TLDR

为什么在背景图片发生变化时，Firefox中没有效果。

（在Firefox上没有FX，适用于Chrome / Safari）

已阅读

我有一个类似滑块的组件，内容在回调时会发生变化，但在使用Firefox进行测试时，过渡效果无效。

我在下面创建了一个简化的小提琴来演示这个问题。下面的小提琴适用于Chrome / Safari，但Firefox没有过渡效果。图像会立即改变。

// Code from the fiddle.
var backgroundImages = [
'http://lorempixel.com/400/200/sports/1/',
'http://lorempixel.com/400/200/sports/2/',
'http://lorempixel.com/400/200/sports/3/', ];

var counter = 0;
setInterval(function () {
    $('.item').css('backgroundImage', 'url(' + backgroundImages[counter] + ')');
    counter += 1;
    if (counter == 3) counter = 0;
}, 2500);

问题不在于过渡本身，证明这是在修改过的小提琴中。在我为元素添加边距的地方，firefox处理带效果的过渡，这意味着边距不会“立即”而是平滑地应用，所以你会看到元素滑动。

See fiddle here

// Code from the modified fiddle
var backgroundImages = [
'http://lorempixel.com/400/200/sports/1/',
'http://lorempixel.com/400/200/sports/2/',
'http://lorempixel.com/400/200/sports/3/', ];

var counter = 0;
setInterval(function () {
    $('.item').css({
        backgroundImage: 'url(' + backgroundImages[counter] + ')',
        margin: counter + 'em'
    });
    counter += 1;
    if (counter == 3) counter = 0;
}, 2500);

我宁愿不为图像使用img元素，我需要它们是用css应用的背景图像。我知道我可以在img元素上做一些javascript，比如简单的fadeOut。但我宁愿使用图像作为背景图像，这给了我更多的灵活性。

Answer 1

我已经更新了你的小提琴，请看样式，你必须使用-webkit-transition / moz-transition和o-transition ..这是为了确保与所有浏览器的兼容性。

http://jsfiddle.net/h_awk/3TN5A/14/

.container {
    position: relative;
    -webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -o-transition: all 1.5s;
    transition: all 1.5s;
}
.item {
    background-repeat: no-repeat;
    height: 200px;
    width: 400px;
    position: absolute;
    -webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -o-transition: all 1.5s;
    transition: all 1.5s;
}

Answer 2

根据this link

，Firefox不支持背景图片转换

我不确定这会对您有所帮助，但您可以通过在滑块中创建所需图像的精灵来尝试一下。精灵可以是垂直或水平。根据精灵的风格，您可以将background-image设置为background-position然后使用javascript而不是更改div的background-image，只需更改background-position即可。主要容器。

Working Demo

使用Javascript：

var counter = 45
setInterval(function () {
    $('.container').css('background-position',counter+"px");
    counter += 45;
    if (counter>90) counter = 0;
}, 2500);

HTML：

<div class="container"></div>

CSS：

.container {
    position: relative;
    background-image:url('http://www.w3schools.com/css/img_navsprites.gif');    
    transition: background-position 3.5s ease;
    width:43px;
    height:44px;
    background-position:0 0;
}

CSS转换不适用于Firefox

2 个答案: