我想在模态的 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 中使用 setInterval 函数改变颜色。
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>
关于javascript - 网络动画,如何对背景 rgba 颜色进行动画处理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57751249/