css3 背景图片的过渡在 Firefox 中不起作用

Question

这是对我的问题的跟进：

查看新的 jsfiddle 并在 Firefox 中尝试：http://jsfiddle.net/40mga4vy/3/

-webkit-transition: all 2.0s ease;
-moz-transition: all 2.0s ease;
-o-transition: all 2.0s ease;
transition: all 2.0s ease;

当 select 从 select 元素创建新的背景图像时，此代码与一些 jquery 结合使用时动画背景图像的变化。它适用于除 Firefox 之外的所有浏览器（在 MacOS 35.0.1 中测试）。

虽然动画背景颜色和 width/height 属性的变化在 FF 中就像一个魅力：http://jsfiddle.net/tw16/JfK6N/ - 动画背景图像不起作用。

研究表明必须设置 "left" 属性但事实证明没有任何影响。我也尝试了各种符号，但没有成功，我不能让它工作。

此 fiddle 中显示了一个解决方法： http://jsfiddle.net/40mga4vy/1/

function changeBackground() {
    $('#wallpaper').removeClass();

    $("#wallpaper").addClass("wallpaper_" +      $("#select_category").val()).css('opacity','0').animate({opacity:'1'});
};

这在 FF 中有效，但它有点难看，因为 class 被删除，然后不透明度增加（看起来不像 css 解决方案那么平滑）。

任何 hints/tricks 或者这根本不受支持？

Answer 1

据我所知，在 css 中，任何浏览器都不支持在单个元素中平滑地交换图像。完成所需操作后，请确保查看性能，您的解决方法并没有达到应有的效率。在这段代码中

$("#wallpaper").addClass("wallpaper_" + $("#select_category").val()).css('opacity','0').animate({opacity:'1'});,

浏览器将执行每一步，直到
.animate({opacity:'1'}).
例如，浏览器首先必须找到 $("#wallpaper") 然后，它会调用 .addClass("wallpaper_" + ...);
并将查找 $("#select_category") 的结果连接起来，然后得到 .val() 等等。每次调用此函数时，它都会遍历这些对象中的每一个，因此效率可能不如页面中的两个动画，它可能会变得有点滞后，如果可能的话，通过 [=40 使用动画=].

无论如何，我建议你做的是（如果我对你想要的是正确的），就按照这里的内容做吧https://jsfiddle.net/bmjg5g9s/

css3 背景图片的过渡在 Firefox 中不起作用

css3 transition on background image doesn't work in Firefox

javascript

jquery

css

css-transitions