Почему не срабатывает аниимация при появлении элемента в списке?

Question

[Сергей Бурдужа]

Добрый день.
Сделал слайдер на vue js.
При клике на стрелки, показывается элемент, у которого index в массиве равен currentSlide.

<transition-group tag="div" class="single-estate-planimetry__slider" name="planslider" appear>
    <div v-if="index === currentPlanimetry"  :data-index="index" class="single-estate__descr-img" v-for="(item, index) in planimetry" :key="item.nome">
        <img :src="item.nome" :alt="item.title">
    </div>
</transition-group>

const appSingle = new Vue({
    el: "#app-single",
    data() {
      return {
        planimetry: [],
        currentPlanimetry: 0
      }
    },
methods: {
      prevPlanimetry(){
        if (this.currentPlanimetry === 0) {
          this.currentPlanimetry = this.planimetry.length - 1
        } else {
          this.currentPlanimetry--
        }
      },
      nextPlanimetry(){
        if (this.currentPlanimetry === this.planimetry.length - 1) {
          this.currentPlanimetry = 0
        } else {
          this.currentPlanimetry++
        }
      },
}
});

.planslider-enter-from {
  opacity: 0;
}
.planslider-enter-to {
  opacity: 1;
}
.planslider-enter-active {
  transition: all 3s;
}

.planslider-leave-from {
  opacity: 1;
}
.planslider-leave-to {
  opacity: 0;
}
.planslider-leave-active {
  //transition: all 3s;
}

Вот при исчезновении работает, а при появлении, нет.

Почему?

Answer 1

[0xD34F]

Судя по

const appSingle = new Vue({

вы используете vue 2. В то время как имена классов соответствуют третьей версии (был ряд изменений):

.planslider-enter-from {

.planslider-leave-from {

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

<transition-group tag="div" class="single-estate-planimetry__slider" name="planslider" appear>
    <div v-if="index === currentPlanimetry"  :data-index="index" class="single-estate__descr-img" v-for="(item, index) in planimetry" :key="item.nome">

Заменить transition-group на transition. Убрать v-if и v-for. Сделать вычисляемое свойство, представляющее текущий элемент.

Comments

[Сергей Бурдужа]

Поменял.

<div class="single-estate-planimetry__slider">
    <div class="single-estate__descr-img">
        <transition name="planslider" appear>
            <img v-if="planimetry[currentPlanimetry]" :src="planimetry[currentPlanimetry].nome" :alt="planimetry[currentPlanimetry].title">
        </transition>
    </div>
</div>

.planslider-enter-active, .planslider-leave-active {
  transition: opacity 1s;
}
.planslider-enter, .planslider-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

Убрал for и transition-group, поменял на версию 2. и все равно не работает https://i.imgur.com/oXU9S3t.png

[0xD34F]

Сергей Бурдужа, где key у анимируемого элемента? Не вижу key. Должен быть.

[Сергей Бурдужа]

0xD34F, А ведь key не должен быть у тэга, только если он является элементом списка?
Я ведь убрал transition-group и оставил transition.

Официальная документация, где тут key?



Короче, я понял мою ошибку, не стоило создавать список, а просто использовать transtion.

И для этого, нужно, чтобы у анимируемого элемента был v-if.
Для этих целей я создал flag и меняю через setTimeout.
И теперь работает.

prevPlanimetry(){
        this.showPlanimetry = false;
        if (this.currentPlanimetry === 0) {
          this.currentPlanimetry = this.planimetry.length - 1
          setTimeout(() => {
            this.showPlanimetry = true;
          }, 300);
        } else {
          this.currentPlanimetry--
          setTimeout(() => {
            this.showPlanimetry = true;
          }, 300);
        }
      },
      nextPlanimetry(){
        this.showPlanimetry = false;
        if (this.currentPlanimetry === this.planimetry.length - 1) {
          this.currentPlanimetry = 0
          setTimeout(() => {
            this.showPlanimetry = true;
          }, 300);
        } else {
          this.currentPlanimetry++
          setTimeout(() => {
            this.showPlanimetry = true;
          }, 300);
        }
      },

[0xD34F]

Официальная документация, где тут key?

Сергей Бурдужа, а вы прочтите раздел целиком, увидите где. Ну или хотя бы поиском по странице воспользуйтесь.

[Сергей Бурдужа]

Все верно, только key нужен, если нужно скрывать и показывать 2 элемента с одинаковым тэгом, которые находятся рядом и когда используется v-if и v-else.
У меня же только v-if.


Ну хорошо, поставлю key, не проблема.