gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 14:37:31 26 4
gpt4 key购买 nike

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

最佳答案

你好像在找

transition-property: background-color;

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

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

...应该do it .

关于css - 如何仅使用 vue 和 css 通过动画制作背景颜色切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53289470/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com