Почему третье изображение кратко показано во время анимации Flip в Vue.js? ⇐ CSS

[Anonymous]

Я работаю над компонентом vue.js, где я создаю флип -анимацию с изображениями, которые меняются каждые несколько секунд. Цель состоит в том, чтобы случайным образом изменить изображение, но есть проблема во время перехода. >
[*] Возможные изображения загружаются из папки. Мы начинаем с одного изображения, и которое будет следующим изображением, определяется случайным образом.
[*] Между изображениями существует анимация. /> Что происходит: < /strong> < /p>

• Логика имеет один недостаток. Анимация между изображением 1 и изображением 2 работает по желанию. Но в анимации от изображения 2 до изображения 3 изображение 1 вновь появляется на короткое время. (И это происходит во всех последующих анимациях.) br/>

code:
шаблон:









< /code>
script: < /p>

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
style: < /p>

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

< /code>
Вопрос: < /strong>
Может ли кто -нибудь объяснить, почему это происходит и как я могу исправить его, чтобы гарантировать, что только текущие и следующие изображения видны, и нет мерцание третьего изображения? Большое спасибо!

Подробнее здесь: https://stackoverflow.com/questions/794 ... -in-vue-js