背景图像上的 css3 过渡在火狐中不起作用

Question

这是我在这里的问题的后续：jquery UI添加带有动画的类确实'；t工作

查看新的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;

当从选择元素中选择新的背景图像时，此代码与一些jquery相结合将背景图像更改动画化。它适用于除Firefox之外的所有浏览器（在MacOS35.0.1中测试）

虽然为背景颜色和宽度/高度属性的变化设置动画就像FF中的魔法一样：http://jsfiddle.net/tw16/JfK6N/-设置背景图像的动画不起作用。

研究表明，必须设置"左"属性，但结果没有任何影响。我也尝试过各种符号，但都没有成功，我无法使它发挥作用。

有一个变通方法显示在这个小提琴：http://jsfiddle.net/40mga4vy/1/

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

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

是否有任何提示/技巧，或者根本不支持？

Answer 1

据我所知，在任何浏览器中都不支持在css中的一个元素中平滑地交换图像。在你做了你需要的事情之后，确保你考虑了性能，你的变通方法并没有那么有效。在这个代码

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

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

不管怎样，我建议你做的是（如果我对你想要的是正确的），做这里的事https://jsfiddle.net/bmjg5g9s/