css - 如何仅使用 vue 和 css 通过动画制作背景颜色切换

Question

所以我正在阅读有关过渡和动画的 vue 文档，但我无法弄清楚如何在切换进度上制作动画(当前背景颜色淡出，新背景颜色淡入)如果你能给我一个提示或者一种方法，我会很感激检查代码:https://codepen.io/Dadboz/pen/XypGoy

var app= new Vue({
        el : '#container',
        data (){
            return{
        background : '',
        background2 : '',
        background3 : '',
        colors:['#7FDBFF','#0074D9','#7FDBFF','#39CCCC','#FFDC00','#F012BE','#DDDDDD','#B10DC9','#FF851B','#3D9970'],
            }
        },
        methods:{
            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-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to{
  opacity: 0;
}

 <transition name="fade" mode="out-in">
        <div :style="{backgroundColor : background}"  id="container">
        <div  :style="{backgroundColor : background2}" id="box">
            <div :style="{backgroundColor : background3}" id="boxin">   
            </div>
        </div>  
   </transition>

Answer 1

你好像在找

transition-property: background-color;

参见transition速记属性specification .简而言之:

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

...应该do it .