Início / user-20839107

mathbreaker's questions

Martin Hope
mathbreaker
Asked: 2025-02-14 23:00:28 +0800 CST
  • 8

Estou trabalhando em um componente Vue.js onde estou criando uma animação flip com imagens que mudam a cada poucos segundos. O objetivo é mudar a imagem aleatoriamente, mas há um problema durante a transição.

O que eu quero:

  • Imagens possíveis são carregadas de uma pasta. Começamos com uma imagem e qual será a próxima imagem é determinada aleatoriamente.
  • Há uma animação de inversão entre as imagens.

O que acontece:

  • A lógica tem uma falha. A animação entre a imagem 1 e a imagem 2 funciona como desejado. Mas na animação da imagem 2 para a imagem 3, a imagem 1 reaparece por um breve momento. (E isso acontece em todas as animações subsequentes também.)

  • Você pode encontrar uma gravação de tela deste problema aqui .

Código:

Modelo:

<template>
  <div class="start-screen">
    <div class="container">
      <div id="card">
        <div
          v-for="(image, index) in images"
          :key="index"
          :class="['flip-page', { active: index === currentIndex, turnedLeft: index === previousIndex }]"
          :style="{ backgroundImage: `url(${image})` }"
        ></div>
      </div>
    </div>
  </div>
</template>

Roteiro:

<script>
export default {
  name: "StartScreen",
  data() {
    return {
      images: [],
      currentIndex: 0,
      previousIndex: null, // Track the last image for smooth transition
    };
  },
  methods: {
    loadImages() {
      const context = require.context("../assets/icons", false, /\.(png|jpe?g|svg)$/);
      this.images = context.keys().map(context);
    },
    getRandomIndex() {
      if (this.images.length <= 1) return 0;

      let newIndex;
      do {
        newIndex = Math.floor(Math.random() * this.images.length);
      } while (newIndex === this.currentIndex); // Avoid immediate repetition

      return newIndex;
    },
    nextSlide() {
      this.previousIndex = this.currentIndex; // Store the previous image index
      this.currentIndex = this.getRandomIndex(); // Get a new random image
    },
  },
  mounted() {
    this.loadImages();
    setInterval(this.nextSlide, 6000); // Flip every 6 seconds
  },
};
</script>

Estilo:

<style scoped>
.start-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Container for the flip effect */
.container {
  width: 260px;
  height: 260px;
  position: relative;
  perspective: 800px;
}

/* Stacked images */
#card {
  width: 100%;
  height: 100%;
  position: absolute;
}

/* Flip animation for each page */
.flip-page {
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  backface-visibility: hidden;
  transition: transform 3s;
  transform: rotateY(180deg);
}

/* Flip the active page forward */
.active {
  transform: rotateY(0deg);
  z-index: 2;
}

/* Only show the most recent previous page */
.turnedLeft {
  transform: rotateY(-180deg);
  z-index: 1;
}
</style>

Pergunta: Alguém pode explicar por que isso acontece e como posso consertar para garantir que apenas as imagens atuais e as próximas fiquem visíveis e que não haja oscilação de uma terceira imagem? Muito obrigado!

css