jQuery add and removeClass background with transition

Question

私は現在、背景をグラデーションに変更するクラスを追加している私のヘッダーを設定しています。

ここでは、jQueryを使用してクラスを追加したり削除したりするコードを示します。 jQueryを使った.cssで作業

がトリガされ

$(document).ready(function(){ 
    $(window).scroll(function(){ 
     if($(this).scrollTop() > 100){ 
      $('header').addClass('gradientHeader');   
     }else{ 
      $('header').removeClass('gradientHeader'); 
     } 
    });  
}); 

とCSS

.gradientHeader{ 
    background: linear-gradient(-45deg, #57cfb0, #2ab5d3); 
    transition: background 0.3s; 
} 

のための私の追加と削除クラスが機能していますが、バックグラウンドでの遷移がトリガされていません。..トランジションはbackground-colorで、特定の色を使用したいですbackground: linear-gradient(-45deg, #57cfb0, #2ab5d3);

$('gradientHeader').css("background-color", "red"); 

これを回避するには？

Answer 1

上記の私のコメントでは、これを行う方法を理解するのに役立つ回答があります。

::before擬似クラスを使用して、divの後ろに線形グラデーションの背景を追加しました。私が後ろに言うとき、それはz-index: -1を持っているので、divの内容と通常の背景色の下にあることを意味します。

ボタンがそのdivの.gradientクラスを切り替えるため、通常の背景色が透明になり、その下にグラデーションが現れます。色とtransparentの間のトランジションは、ブラウザでサポートされています。

$('button').click(function() { 
 
    $('div').toggleClass('gradient'); 
 
});

div { 
 
    background-color: teal; 
 
    transition: background-color .5s; 
 
    width: 200px; 
 
    height: 200px; 
 
    position: relative; 
 
} 
 

 
div::before { 
 
    background: linear-gradient(-45deg, #57cfb0, #2ab5d3); 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    z-index: -1; 
 
} 
 

 
div.gradient { 
 
    background-color: transparent; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    <button>Toggle Gradient</button> 
 
</div>