如何淡入div中的背景顏色之間的過渡？

Question

如何淡化div中背景顏色之間的過渡？

我一直沒能用我的代碼做到這一點，我無法在任何地方找到解決方案。有人可以幫幫我嗎？現在感謝。

$(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

在你的CSS文件，你可以添加：

#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; 
    } 

每當你改變你的背景的背景色，過渡效果會happend。

你也可以試試這個方法：

$(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只能訪問其中：僞元素不是，只在屏幕上通過CSS生成的DOM。

你可能最終使用專用的一個額外的容器來繪製第二梯度你的樣子並通過opacity發揮就可以了fadding：

爲例

// 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>