Веб-анимация, как анимировать цвет фона rgba

Я хочу анимировать цвет фона в rgba для модального окна, чтобы он исчезал. Я не могу использовать непрозрачность в качестве div внутри модального окна. Я не хочу быть прозрачным. Я не могу использовать Jquery, но я использую React.

Я не получаю сообщение об ошибке ниже не работает

const modal = document.getElementById('modal');
modal.animate(
[
  {backgroundColor: 'rgba(255, 0, 0, 0)'}, 
  {backgroundColor: 'rgba(255, 0, 0, 0.8)'}
], 
  {duration: 200, easing: 'ease-in-out', fill: 'forwards'}
);

javascript css web-animations
person Bill    schedule 02.09.2019    source источник
comment
Этот код работает для меня. Можете ли вы поделиться MCVE?   -  person shkaper    schedule 02.09.2019
comment
Изучив приведенное ниже решение, я обнаружил, что оно работает, просто я не мог его увидеть, так как непрозрачность была установлена ​​​​на 0.   -  person Bill    schedule 02.09.2019

Ответы (1)


arrow_upward
0
arrow_downward

Используйте функцию setInterval для изменения цвета в javascript.

var change=0;
var colorEvent= setInterval("changeColor();", 50);
function changeColor(){
  if(change<100){           
      document.getElementById("modal").style.backgroundColor="rgb(255,0,"+change+")";
  }
  else 
    clearInterval(colorEvent);
  change+=1;
  console.log(change);
}
#modal{
    height:50px;
    background-color:rgb(255,0,0);
}
<div id="modal"></div>

или изменение прозрачности

var change=0.0;
if(change<0.8){
  setInterval(function(){
      document.getElementById("modal").style.backgroundColor="rgb(255,0,0,"+change+")";
      change+=0.01;
  }, 10);
}
#modal{
    height:50px;
    background-color:rgb(255,0,0,0);
}
<div id="modal"></div>

person Rakibul Islam    schedule 02.09.2019
comment
Гениальное решение, мне нравится, не могу поверить, что я об этом не подумал. Мне пришлось изменить rgb на rgba для изменения непрозрачности, но да! - person Bill; 02.09.2019
comment
Я вижу, что setinterval никогда не перестает работать, как его остановить? - person Bill; 02.09.2019
comment
@Bill, я обновил первый фрагмент. Проверьте еще раз. - person Rakibul Islam; 02.09.2019