Css 在背景图像的vue中添加过渡效果

我已经搜索了几天，在我正在通过Vue应用程序更改的背景图像上添加淡入淡出过渡效果

以下是我一直在测试的代码片段：

newvue({
el:“主要”，
数据：{
图像：[
"https://images.freeimages.com/images/large-previews/bfd/clouds-1371838.jpg",
"https://images.freeimages.com/images/large-previews/ffa/water-lilly-1368676.jpg",
"https://images.freeimages.com/images/large-previews/efb/lotus-flower-1382251.jpg"
],
电流：0，
节目：假
},
方法：{
changeBG:函数（）{
if（this.current
.main{
高度：800px；
宽度：100%；
左边距：自动；
右边距：自动；
z指数：0；
背景重复：无重复；
背景尺寸：封面；
背景位置：中心0px；
} 
钮扣{
宽度：200px；
高度：25px；
利润率：10px；
}
p、 你好{
颜色：白色；
利润率：10px；
字体大小：50px；
}
.淡入激活状态，
.淡入淡出激活状态{
过渡：所有2s线性；
}
.淡入，
.淡出{
不透明度：0；
}
.淡入，
.淡出{
不透明度：1；
}
/*hello示例转换*/
.幻灯片淡入激活状态{
过渡：所有的1容易；
}
.幻灯片淡入淡出激活状态{
过渡：所有1s三次贝塞尔（1,0.5,0.8,1）；
}
.滑入淡入，
.滑离{
转换：translateX（10px）；
不透明度：0；
}

变更
切换你好
您所有的基地都属于我们
要使Vue转换工作，您需要更改DOM元素。所以，如果你改变了实际的图像，这种方法是可行的。在您的示例中，您只更改属性值。DOM不会触发转换，因为它是同一个元素

但是，您可以使用
：key
属性说服VUE替换元素，从而在两个元素之间进行转换。

您还可以像示例中那样使用内嵌CSS设置图像。您仍然需要在CSS中创建转换

下面是一个使用Vue转换的示例


newvue({
el:“主要”，
数据：{
当前ID:0，
图像：[
'https://images.freeimages.com/images/large-previews/efb/lotus-flower-1382251.jpg',
'https://images.freeimages.com/images/large-previews/ffa/water-lilly-1368676.jpg',
'https://images.freeimages.com/images/large-previews/bfd/clouds-1371838.jpg'
]
},
方法：{
toggleImage:function（）{
if（this.currentID
正文{
溢出：隐藏；
}
梅因先生{
位置：相对位置；
}
img{
宽度：100%；
高度：自动；
显示：块；
位置：绝对位置；
-webkit过渡：所有3s轻松；
过渡：所有3s轻松；
}
钮扣{
z指数：100；
位置：相对位置；
宽度：200px；
高度：25px；
利润率：20px；
}
/*带有转换名称的前缀*/
.幻灯片淡入激活状态{
不透明度：1；
z指数：10；
}
.幻灯片淡入淡出激活状态{
不透明度：1；
}
.滑入淡入，
.滑离{
不透明度：0；
}

切换图像
答案确实是忘记vue转换，让css来完成这项工作。可在此处找到一个工作示例：


newvue({
el:“主要”，
数据：{
秀:假,，
BG1：是的，
BG2：错，
BG3：错误
},
方法：{
changeBG:function（）{
如果（this.BG1==true）{
this.BG1=假；
this.BG2=真；
this.BG3=假；
}else if（this.BG2==true）{
this.BG1=假；
this.BG2=假；
this.BG3=真；
}else if（this.BG3==true）{
this.BG1=真；
this.BG2=假；
this.BG3=假；
}       
},
showBG1:函数（）{
如果（this.BG1==true）{
返回“”；
}否则{
返回“透明”；
}
},
showBG2:函数（）{
如果（this.BG2==true）{
返回“”；
}否则{
返回“透明”；
}
},
showBG3:函数（）{
如果（this.BG3==true）{
返回“”；
}否则{
返回“透明”；
}
}    
}
});
.main{
} 
#bgs img.transparent{
不透明度：0；
转换：translateY（-0.0px）；
}
#bgs img{
/*设置填充背景的规则*/
最小高度：100%；
最小宽度：1024px；
/*设置比例缩放*/
宽度：100%；
高度：自动；
/*设置定位*/
位置：固定；
排名：0；
左：0；
z指数：-1；
-webkit过渡：所有0.5s易入易出；
-moz转换：所有0.5s的易入易出；
-o型过渡：所有0.5s缓进缓出；
过渡：所有0.5s缓进缓出；
}
@媒体屏幕和（最大宽度：1024px）{/*特定于此特定图像*/
#bgs img{
左：50%；
左边距：-512px；/*50%*/
}
}
钮扣{
z指数：100；
位置：相对位置；
宽度：200px；
高度：25px；
利润率：20px；
}
p、 你好{
颜色：白色；
利润率：40像素；
字体大小：50px；
}
。淡入激活状态{
过渡：所有的1容易；
}
.淡入淡出激活状态{
过渡：所有的1容易；
}
.淡入淡出淡出淡出{
transform:translateY（-5px）；
不透明度：0；
}
/*hello示例转换*/
.幻灯片淡入激活状态{
过渡：所有的1容易；
}
.幻灯片淡入淡出激活状态{
过渡：所有1s三次贝塞尔（1,0.5,0.8,1）；
}
.滑入淡入，
.滑离{
transform:translateY（-5px）；
不透明度：0；
}

变更
切换你好
您所有的基地都属于我们
对于像我这样的业余爱好者来说，这是一个非常晦涩难懂的答案，但它让我找到了一个非常有效的解决方案。很抱歉，我没有时间构建一个示例。看来你找到了解决办法