설정 배경 그라데이션 - jshint 오류

Question

내가 jQuery를 가진 배경 그라데이션 애니메이션을하기 위해 노력하고있어

이 같은 : 나는 DIST를 빌드 할 때

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); 
    } 
}); 

이를 제외하고, 정확하게 내가 원하는 방식으로 작동합니다 jshint는 background 속성에 대해 duplicate key 오류를 발생시킵니다. 이는 의미가 있습니다. 내 질문은 어떻게 다른 모든 브라우저에 대한 배경 그라디언트를 설정하는 동안이 오류를 방지하려면 무엇입니까?

Answer 1

코드에 결함이 있으므로 jsHint가 정확합니다. 객체에 정의 할 때마다 background 키를 덮어 쓰고 있으므로 최종 값만 할당됩니다. 나는 당신이 시험해 보는 브라우저에서 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); 

가 나는 추한 인정하지만, 실제 대안이 없다