Vuejs: fade out-in transition not working

Question

I have implemented this code for the transition feature to be placed within the website, but it is not working for some reason. The transition should work when the button is clicked.

I have added the HTML, Javascript and CSS code that I am mainly using and they linked to the transition feature that I need.

I hope that someone can help me. Many thanks in advance!

HTML:

<transition name="fade" mode="out-in">
                        <div class="plain-slider w-slider">
                            <div class="mask w-slider-mask">
                                <div class="slide-padding w-slide">
                                    <div class="testimonial">
                                        <div class="testimonial-name>
                                            <p class="s"></p>
                                            <div class="testimonial-text">
                                                {{testimonialData[number].comments}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="testimonial-row">
                                        <div class="column w-col w-col-3">
                                            <div class="testimonial-image">
                                                <img class="displayPic" alt="Display Picture" v-bind:src="testimonialData[number].userPic" />
                                            </div>
                                        </div>
                                        <div class="testimonial-name w-col">
                                            <div class="blue bold">
                                                {{testimonialData[number].name}}
                                            </div>
                                            <div class="ratingStars">
                                                <img class="rate" src="~/assets/Images/All/svgs/svg/star.svg" alt="Review Star Icon" v-for="n in testimonialData[number].stars"
                                                    :key="n" />
                                            </div>
        
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </transition>
    <button class="next" @click="increment"> > </button>

Javascript:

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

CSS:

<script>
export default{
  data(){
    view: 'v-a'
    return{
    testimonialData: [
      {
        name: 'W',
        comments: 'The easiest ticket site.',
        stars: 5
      },
      {
        name: 'G',
        comments: 'Its so easy to use.',
        stars: 4
      }
    ],
    number: 0
  }
  },
  methods:{
    increment: function(){
      this.number = this.number === this.testimonialData.length - 1 ? 0 : this.number + 1
    }
  },
}
</script>

Answer 1

It seems you misunderstood how Enter/Leave& List Transition works.

As the guide said:

Vue provides a transition wrapper component, allowing you to add entering/leaving transitions for any element or component in the following contexts:

1. Conditional rendering (using v-if)
2. Conditional display (using v-show)
3. Dynamic components
4. Component root nodes

Your codes only change the contents of some nodes, don't meet any one of above four situations.

You can add v-if to <div class="plain-slider w-slider" v-if="show">, then you will see the transition effect.

Vue.config.productionTip = false
app = new Vue({ //not vue, it is Vue
  el: "#app",
  data(){
    view: 'v-a'
    return{
    testimonialData: [
      {
        name: 'W',
        comments: 'The easiest ticket site.',
        stars: 5
      },
      {
        name: 'G',
        comments: 'Its so easy to use.',
        stars: 4
      }
    ],
    number: 0,
    show: true
  }
  },
  methods:{
    increment: function(){
      this.number = this.number === this.testimonialData.length - 1 ? 0 : this.number + 1
      this.show = !this.show
    }
  }
})

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

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
<transition name="fade" mode="out-in">
                        <div class="plain-slider w-slider" v-if="show">
                            <div class="mask w-slider-mask">
                                <div class="slide-padding w-slide">
                                    <div class="testimonial">
                                        <div class="testimonial-name">
                                            <p class="s"></p>
                                            <div class="testimonial-text">
                                                {{testimonialData[number].comments}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="testimonial-row">
                                        <div class="column w-col w-col-3">
                                            <div class="testimonial-image">
                                                <img class="displayPic" alt="Display Picture" v-bind:src="testimonialData[number].userPic" />
                                            </div>
                                        </div>
                                        <div class="testimonial-name w-col">
                                            <div class="blue bold">
                                                {{testimonialData[number].name}}
                                            </div>
                                            <div class="ratingStars">
                                                <img class="rate" src="~/assets/Images/All/svgs/svg/star.svg" alt="Review Star Icon" v-for="n in testimonialData[number].stars"
                                                    :key="n" />
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </transition>
    <button class="next" @click="increment()"> > </button>
</div>