CSSはスムーズにjsで色を変更します

私はCSSの色を変更するjsコードを持っていますが、私の問題は色をスムーズに変更できないことです。CSSはスムーズにjsで色を変更します

HTML：ここ

<html id="html">

は、CSSです：

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

とシンプルなJSのthats：

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がバイパスされることになります。私はスタイリングを管理するためにclassを設定し、CSSを使用するためにはJavaScriptを使用してお勧めします：

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

CSSはスムーズにjsで色を変更します

答えて

関連する問題