javascript - 使用 jquery 设置背景渐变 - jshint 错误

Question

我正在尝试使用 jQuery 制作背景渐变动画，如下所示:

this.$next.css('line-indent', 0).animate({
    'line-indent': 100
}, {
    "duration": 750,
    "step": function(value) {
        $(this).css({
            "background": color,
            "background": "moz-radial-gradient (50% 50%, ellipse cover, transparent " + value + "%, " + color + " " + value + "%))",
            "background": "-webkit-radial-gradient(50% 50%, circle, transparent " + value + "%, " + color + " " + value + "%)",
            "background": "radial-gradient(circle at center, transparent " + value + "%, " + color + " " + value + "%)"
        })
    },
    "easing": 'easeInQuint',
    "complete": function() {
        $(this).css({
            "transition": 'none',
            "background": color,
            "background": "moz-radial-gradient (50% 50%, ellipse cover, transparent 0%, " + color + " 0%)",
            "background": "-webkit-radial-gradient(50% 50%, circle, transparent 0%, " + color + " 0%)",
            "background": "radial-gradient(circle at center, transparent 0%, " + color + " 0%)",
            "width": 0
        })
        self.$loader.fadeIn(0);
    }
});

这完全按照我想要的方式工作，除了当我尝试构建用于生产的 dist 文件时，jshint 会抛出 background 属性的 duplicate key 错误，该错误说得通。我的问题是，在为所有不同的浏览器设置背景渐变时如何防止此错误？

Answer 1

jsHint 是正确的，因为您的代码有缺陷。每次在对象中定义背景键时，都会覆盖它，因此只会分配最终值。我只能假设它适合您，因为 radial-gradient 在您测试的浏览器中工作。

这是您遇到的问题的演示:

var foo = function(o) {
    Object.keys(o).forEach(function(key) {
        console.log(key); // note only 1 key is shown as it's overwritten
    })
    
    console.log(o.background); // shows the last value
}

foo({
    "background": 'red',
    "background": "moz-radial-gradient (50% 50%, ellipse cover, transparent 100%, red 5%))",
    "background": "-webkit-radial-gradient(50% 50%, circle, transparent 100%, red 5%)",
    "background": "radial-gradient(circle at center, transparent 100%, red 5%)"
})

要解决此问题，您需要调用 attr() 并将样式直接应用于元素。无法使用 css()，因为每次调用它时它也会覆盖 background 属性。

var style = [
    "background: " + color,
    "background: moz-radial-gradient (50% 50%, ellipse cover, transparent " + value + "%, " + color + " " + value + "%))",
    "background: -webkit-radial-gradient(50% 50%, circle, transparent " + value + "%, " + color + " " + value + "%)",
    "background: radial-gradient(circle at center, transparent " + value + "%, " + color + " " + value + "%)"
].join(';');

$(this).attr('style', style); 

我承认这很丑，但没有真正的选择