如何仅使用vue和css对动画进行背景颜色切换

因此，我正在阅读有关转换和动画的vue文档，但我不知道如何在切换过程中制作动画（当前背景色淡出和新背景色淡入），如果您能给我一个提示或方法，我将非常感谢检查代码：

var-app=新的Vue({
el:'集装箱'，
数据（）{
返回{
背景：''，
背景2：，
背景3：，
颜色：[“7FDBFF”、“0074D9”、“7FDBFF”、“39CCCC”、“FFDC00”、“F012BE”、“DDDDDD”、“B10DC9”、“FF851B”、“3D9970”]，
}
},
方法：{
swc（）{
this.background=this.colors[Math.floor（Math.random（）*10）]
this.background2=this.colors[Math.floor（Math.random（）*10）]
this.background3=this.colors[Math.floor（Math.random（）*10）]
}
}
})

.fade进入活动状态，.fade离开活动状态{
转变：不透明度。5s；
}
.淡入淡出淡出淡出{
不透明度：0；
}

---

您似乎在寻找

transition-property: background-color;

请参见

transition

速记属性。简言之：

transition div {
  transition: background-color 4s;
}

…应该