如何淡入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>