Why doesn't the animation fire when an element appears in the list?

Question

Vue.js

Good afternoon.
Made a slider in vue js.
When clicking on the arrows, the element whose index in the array is equal to currentSlide is shown.

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

It works when it disappears, but when it appears, it doesn't.

Why?

Answer 1

Judging by

const appSingle = new Vue({

you are using vue 2. While the class names match the third version (there were a number of changes ):

.planslider-enter-from {

.planslider-leave-from {

It does not directly relate to the stated problem, but it is impossible to pass by:

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

Replace transition-groupwith transition. Remove v-ifand v-for. Make a computed property that represents the current element.