css Farbe glatt mit js ändern

Ich habe einen Js-Code, der eine CSS-Farbe ändert, aber mein Problem ist, dass ich möchte, um die Farbe reibungslos zu ändern.css Farbe glatt mit js ändern

HTML:

<html id="html">

Hier ist die CSS:

html{ 
    background:radial-gradient(circle, #ffffff, #aaaaaa); 
    transition:all 5s linear; 
}

Und das ist die einfache js:

function changecolor(r,g,b){ 
    var bg = document.getElementById("html"); 
    bg.style.backgroundImage = 'radial-gradient(circle, #ffffff, #'+r+g+b+ ')'; 
};

Und dann irgendwo im Code:

changecolor(9,0,0);

Die Farbe ändert sich perfekt, aber der Übergang funktioniert nicht. Wie ich schon sagte, ich möchte, dass die Farbe sich sanft ändert.

Kann mir bitte jemand helfen? Vielen Dank!

Quelle

2016-07-24 Kamil

Mögliches Duplikat von [CSS3-Übergänge mit Hintergrund mit Farbverlauf verwenden] (http://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds) – Arnauld

Ich glaube, Javascript verwenden, um das CSS zu setzen bedeutet, dass transition umgangen wird. Ich würde empfehlen, mit Hilfe von Javascript die class zu setzen und dann CSS verwenden, um das Styling zu verwalten:

function changecolor(r,g,b){ 
    var bg = document.getElementById("html"); 
    bg.className = "alt-bg"; 
};

CSS:

.alt-bg { 
    background-image: styles-here; 
}

Hinweis: Dies berücksichtigt nicht nehmen Sie sich die Farben durch Setzen von Variablen, Es hängt von Ihren spezifischen Bedürfnissen ab, ob dies für Sie funktioniert. IMO ist es besser, Klassen hinzuzufügen/zu entfernen und einen Weg zu finden, die Farben woanders möglichst variabel zu machen.

Quelle

2016-07-24 12:43:34 Toby

Antwort

Verwandte Themen