如何仅使用 vue 和 css 使用动画制作背景颜色切换答案

【问题标题】：how to make the background-color switch with an animation using only vue and css如何仅使用 vue 和 css 使用动画制作背景颜色切换
【发布时间】：2018-11-13 21:04:12
【问题描述】：

所以我正在阅读关于过渡和动画的 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>

【问题讨论】：

标签： css vue.js

【解决方案1】：

你似乎在寻找

transition-property: background-color;

参见transition 速记属性specification。简而言之：

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

...应该do it。

【讨论】：