Как угасать переход между цветами фона в 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

Animate фона с использованием линейных градиентов не может быть возможным, вместо того, чтобы вы могли бы сделать это на 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.

Вы можете закончить с помощью дополнительного контейнера, посвященный сделать это второй градиент ваш взгляд и воспроизведение fadding на него через opacity:

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>