divの背景色の間の遷移をフェードインする方法は？

Question

divの背景色の間で遷移をフェードインする方法はありますか？

私のコードではこれを行うことができず、どこでも解決策を見つけることができません。誰か助けてくれますか？ありがとうございました。 CSSファイルの

$(document).ready(function() { 
 
    var containerColors = [{ 
 
     "background": "linear-gradient(to top right, #1abc9c, #3498db)" 
 
    }, 
 
    { 
 
     "background": "linear-gradient(to top right, red, blue)" 
 
    } 
 
    ]; 
 

 
    $("#button").click(function() { 
 
    var ramdom = Math.floor((Math.random() * 2)); 
 
    $("#container").css(containerColors[ramdom]); 
 
    }); 
 
});

#container { 
 
    height: 100vh; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container" class="container-fluid"> 
 
    <div class="box"> 
 
    <button id="button">click</button> 
 
    </div> 
 
</div>

Answer 1

あなたが追加することができます。

#container{ 
    background: linear-gradient(to top right, #1abc9c, #3498db); 
    -moz-transition: background 0.3s ease-in; 
    -o-transition: background 0.3s ease-in; 
    -webkit-transition: background 0.3s ease-in; 
    } 

をあなたがあなたの背景の背景色を変更するたびに、トランジション効果が起こったでしょう。

あなたもこの方法を試すことができます。

$(document).ready(function() { 
      var containerColors = [ 
       {"background": "linear-gradient(to top right, #1abc9c, #3498db)"}, 
       {"background": "linear-gradient(to top right, red, blue)"} 
      ]; 

      $("#button").click(function() { 
       var ramdom = Math.floor((Math.random() * 2)); 
       $("#container").hide(); 
       $("#container").fadeIn("slow", function(){ 
        $("#container").css(containerColors[ramdom]); 
       }); 
      }); 
     }); 

私はちょうどテストし、それは私のために働きました。

Answer 2

線形グラデーションを使用して背景をアニメーションではなく、あなたのjavascriptでこれを行うことができ、できないことがあります。

$("#button").click(function() { 
    $cont = $('#container'); 
    $cont.fadeOut('slow', function() { 
     var ramdom = Math.floor((Math.random() * 2)); 
     $("#container").css(containerColors[ramdom]); 
     $cont.fadeIn(); 
    }); 
}); 

Answer 3

あなたはbackground-gradientsをアニメーション化することはできません。

You could use a pseudo element and play with opacityただし、javaScriptは、擬似要素ではないDOMにのみアクセスできます。これは、CSSを介して画面でのみ生成されます。

あなたは、第2勾配のためにあなたの外観を描いて、 opacityを経由してその上にfaddingを再生するには専用の余分なコンテナを使用して終了することがあり

：

Exemple

// quick update of your script 
 
$(document).ready(function() { 
 
    var containerColors = [ 
 
     {"opacity" : "1"}, 
 
     {"opacity" : "0"} 
 
    ]; 
 

 
    $("#button").click(function() { 
 
     var ramdom = Math.floor((Math.random() * 2)); 
 
     $("#container .bg").css(containerColors[ramdom]); 
 
    }); 
 
});

#container { 
 
    position: relative; 
 
    height: 80vh; 
 
    background: linear-gradient(to top right, red, blue); 
 
} 
 

 
#container > .box 
 
    /* comment: 
 
     or any direct child if unknown 
 
#container > * 
 

 
    end comment */ 
 
{ 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
#container .bg { 
 
    background: linear-gradient(to top right, #1abc9c, #3498db); 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    transition:0.5s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container" class="container-fluid"><div class="bg"></div> 
 
     <div class="box"> 
 
      <button id="button">click</button> 
 
     </div> 
 
    </div>