使用JavaScript更改Vue.js项目中的背景图像

我已经构建了一种通过在div容器上单击不同类来更改背景图像的方法。它实际上是有效的，但我似乎无法控制过渡，使其淡入或其他。它只适用于我申请的第一个班级

我用于更改image类的详细代码如下：

导出默认值{
名称：'LandingPage'，
数据：函数（）{
返回{
bgimage：没错，
bgimage2：错误，
bgimage3：错误，
bgimage4：错误
}
},
挂载（）{
setTimeout（（）=>this.changeBackground（），10000）；
},
更新（）{
日志（“已更新！”）
setTimeout（（）=>this.changeBackground（），10000）
},
方法：{
changeBackground:函数（）{
如果（此.bg图像）{
this.bgimage=false，
this.bgimage2=true；
this.bgimage3=假；
this.bgimage4=假；
}
else if（this.bgimage2）{
this.bgimage=false，
this.bgimage2=false；
this.bgimage3=真；
this.bgimage4=假；
}
else if（this.bgimage3）{
this.bgimage=false；
this.bgimage2=false；
this.bgimage3=假；
this.bgimage4=true；
}
否则{
this.bgimage=true；
this.bgimage2=false；
this.bgimage3=假；
this.bgimage4=假；
}
}
},
}

和CSS：

    .bgimage {
 background-image:url('../pics/joel-muniz.jpg');
 background-position: top;
 
}
.bgimage2 {
  background-image:url('../pics/young-artist.jpg'); 
  background-position: top;
  
}
.bgimage3 {
  background-image:url('../pics/black-protests.jpg');
  background-position: center;
  
}
.bgimage4 {
  background-image:url('../pics/nesabymakers.jpg');
  background-position: center;
  
}

有人知道如何使过渡更顺利吗

模型在这里现场直播：

好一点，这是我的第一个问题：-）

模板（请求后共享）：

成为你想在世界上看到的改变
加入我们吧！

---

谢谢大家!

请共享模板请查找上面的模板…请共享模板请查找上面的模板。。。

<template>
  <div class="flex-none items-start inline-flex justify-start flex-col flex min-h-full w-full ">
  
  <div class="flex-none bg-cover bg-no-repeat items-center inline-flex justify-center flex-col flex w-full" :class="{bgimage, bgimage2, bgimage3, bgimage4}">
    <div
      class="flex-none items-center inline-flex justify-center bg-opacity-50 bg-white h-full w-full"
    >
      <div
        class="flex-none py-48 space-y-4 px-24 text-center flex-col flex items-center inline-flex justify-center mx-auto w-full max-w-5xl"
      >
        <h1
          class="text-gray-900 bg-transparent tracking-tight font-semibold text-5xl font-sans"
        >
          Be The Change You Want To See In The World
        </h1>
        <button
  class="flex-none rounded text-white w-auto py-2 px-8 text-center font-light bg-blue-800 shadow-md"
>
  Join Us!
</button>
      </div>
    </div>
  </div>

</div>

</template>