Блог

Главная - Вопросы по программированию - Переходная группа VueJS не работает с изображениями, как я могу исчезать изображения?

Переходная группа VueJS не работает с изображениями, как я могу исчезать изображения?

#vue.js #vuejs3 #vuejs-transition-group

Вопрос:

Я пытаюсь создать слайдер изображений, который стирает изображения. Изображение 1 должно исчезнуть в тот же момент, когда появится изображение 2. Другими словами: между ними не должно быть разрыва. Прямо сейчас это не имеет ничего общего с исчезновением. Код работает, так как до сих пор, когда пользователь нажимает «далее», текущие изображения исчезают, через 0,9 с появляется следующее изображение. Между ними существует задержка в 0,9 с (такая же, как указано в CSS), поэтому он каким-то образом распознает время перехода. Он только не исчезает, после нажатия на кнопку он сразу же исчезает. Что я упускаю?

Мой код

 <template>
  <div>
    <transition-group name='fade' tag='div'>
      <div v-for="i in [currentIndex]" :key='i'>
        <img :src="currentImg" />
      </div>
    </transition-group>
    <a class="prev" @click="prev" href='#'>amp;#10094;</a>
  <a class="next" @click="next" href='#'>amp;#10095;</a>
  </div>
</template>
 
 <script>
export default {
  data() {
    return {
      images: [
        'https://cdn.pixabay.com/photo/2015/12/12/15/24/amsterdam-1089646_1280.jpg',
        'https://cdn.pixabay.com/photo/2016/02/17/23/03/usa-1206240_1280.jpg',
        'https://cdn.pixabay.com/photo/2015/05/15/14/27/eiffel-tower-768501_1280.jpg',
        'https://cdn.pixabay.com/photo/2016/12/04/19/30/berlin-cathedral-1882397_1280.jpg'
        ],
      timer: null,
      currentIndex: 0,
      show: true
    };
  },

  mounted: function () {
    this.startSlide();
  },

  methods: {
    startSlide: function () {
      this.timer = setInterval(this.next, 4000);
    },

    next: function () {
      this.currentIndex  = 1;
    },
    prev: function () {
      this.currentIndex -= 1;
    },
  },

  computed: {
    currentImg: function () {
      return this.images[Math.abs(this.currentIndex) % this.images.length];
    },
  },
};
</script>
 
 <style>
.fade-enter-active,
.fade-leave-active {
  transition: all 0.9s ease;
  overflow: hidden;
  visibility: visible;
  position: absolute;
  width:100%;
  opacity: 1;
}

.fade-enter,
.fade-leave-to {
  visibility: hidden;
  width:100%;
  opacity: 0;
}

img {
height:600px;
width:100%
  }

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.7s ease;
  border-radius: 0 4px 4px 0;
  text-decoration: none;
  user-select: none;
}

.next {
  right: 0;
}

.prev {
  left: 0;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.9);
}

</style>

Комментарии:

1. Что произойдет, если вы удалите атрибут видимости из своих классов css, оставив непрозрачность. Видимость является истинной или ложной, но ничего промежуточного, поэтому ее нельзя изменить.

2. То же самое, он исчезает, и через 0,9 с появляются следующие изображения, сразу (без выцветания)

3. Похоже, что выцветание работает, но каким-то образом изображения заменяются где-то в другом месте с холста, как только начинается переход. Когда переход заканчивается, изображение возвращается в исходное положение

Ответ №1:

Измените .fade-enter на .fade-enter-from .

См. Пример

Комментарии:

1. пробовал это уже, к сожалению, тот же эффект (лучше сказать: никакого эффекта)

2. Вы видели пример по ссылке? Это работает.

3. Каким-то образом, когда я копирую свой код по ссылке, он также работает. Но в моем браузере этого нет…

Ответ №2:

Это все position:absolute здесь испортило… Убрал эту строку, теперь она работает как заклинание!

Метки: ,