网络动画，如何对背景 rgba 颜色进行动画处理

Question

我想在模态的 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'}
);

Answer 1

使用 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>

网络动画，如何对背景 rgba 颜色进行动画处理

Web Animation, how to animate the background rgba color

javascript

css

web-animations