如何淡化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;
  }

每當您更改背景的背景色時，就會發生過渡效果。

您也可以這樣嘗試：

$(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動畫。

您可以使用偽元素並使用opacity播放 ，但javaScript僅可以訪問：pseudo元素沒有的DOM，僅可以通過CSS在屏幕上生成。

您可能會結束使用一個額外的容器，專門用來繪制您想要的第二個漸變並通過opacity對其進行淡化：

例子

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