Блог

Я создал способ изменения фоновых изображений, добавляя разные классы в div-контейнер. Это действительно работает, но, похоже, я не могу контролировать переход, чтобы он затухал или что-то еще. Это работает только для первого класса, который я применяю.

Подробный код, который я использовал для изменения класса image, находится здесь:

 export default {
  name: 'LandingPage',
  data: function () {
            return {
                bgimage: true,
                bgimage2: false,
                bgimage3: false,
                bgimage4: false
                
            }
        },
  mounted () {
    
    setTimeout(() => this.changeBackground(), 10000);
  },
  updated () {
      console.log("updated!")
      setTimeout(() => this.changeBackground(), 10000)
  },
 methods: {
            changeBackground: function () {
              if (this.bgimage) {
                this.bgimage = false,
                this.bgimage2 = true;
                this.bgimage3 = false;
                this.bgimage4 = false;
              }
              else if (this.bgimage2) {
                this.bgimage = false,
                this.bgimage2 = false;
                this.bgimage3 = true;
                this.bgimage4 = false;
              }
              else if (this.bgimage3) {
                this.bgimage = false;
                this.bgimage2 = false;
                this.bgimage3 = false;
                this.bgimage4 = true;
              }
              else {
                this.bgimage = true;
                this.bgimage2 = false;
                this.bgimage3 = false;
                this.bgimage4 = false;
              }

              }
            },
}
</script>
  

и 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;
  
}
  

У кого-нибудь есть идея, как сделать переход более плавным?

Макет находится здесь: https://yolanda.netlify.app /#/

Будьте любезны, это мой первый вопрос 🙂

ШАБЛОН (общий после запроса):

 <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>
  

Спасибо!