Vue.js淡入淡出（fade）过渡效果失效问题求助

Hey there! Let's get that fade transition working properly. I noticed a few key issues in your code that are preventing the transition from firing correctly. Here's what needs fixing:

1. Mixed-up JavaScript and CSS Code #

You accidentally pasted your CSS styles into the JavaScript block and vice versa. That's a quick fix—just swap them back to their correct places.

2. Missing Unique key for Transition Detection #

Vue's <transition> component needs a way to detect when the content inside has changed to trigger the transition. Right now, you're updating the number data property, but the root element inside <transition> doesn't have a unique key tied to this value. Adding :key="number" will tell Vue to treat each state as a separate element, enabling the out-in transition.

3. HTML Syntax Error #

There's an unclosed quote in your testimonial-name class: <div class="testimonial-name> should be <div class="testimonial-name">. This can break rendering and indirectly affect transitions.

Fixed Code Snippets #

HTML

<transition name="fade" mode="out-in">
  <div class="plain-slider w-slider" :key="number">
    <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

<script>
export default{
  data(){
    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>

CSS

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

Once you apply these fixes, clicking the next button should trigger a smooth fade-out of the current testimonial followed by a fade-in of the next one. Let me know if you run into any other issues!

内容的提问来源于stack exchange，提问作者Aadil Hafesji