css меняет цвет гладко с js

У меня есть код js, который меняет цвет css, но моя проблема в том, что я не хочу менять цвет плавно.css меняет цвет гладко с js

HTML:

<html id="html">

Вот CSS:

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

А вот простые ЯШ:

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

А потом где-то в коде:

changecolor(9,0,0);

Цвет меняется отлично, но переход не работает. Как я уже говорил, я хочу, чтобы цвет плавно менялся.

Может ли кто-нибудь мне помочь? Благодаря!

источник

2016-07-24 Kamil

Возможный дубликат [Использовать переходы CSS3 с градиентными фонов] (http://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds) – Arnauld

Я считаю, что использование javascript для установки CSS означает, что transition обходит. Я рекомендую использовать JavaScript, чтобы установить class, а затем использовать CSS для управления стилем:

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

CSS:

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

Примечание: это не учитывает ваши настройки цвета с помощью переменных, это зависит от ваших конкретных потребностей, будет ли это работать для вас. IMO лучше добавлять/удалять классы и определять способ изменения цвета в другом месте, если это вообще возможно.

источник

2016-07-24 12:43:34 Toby

ответ

Смежные вопросы